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Head First Mobile Web ( 中文版 ) 


Mobile 

从这本书能 f 到什么？ 

移动 Web 的使用在呈煤炸式增 K：。 很快，人们会更愿意在手机和平板电脑而不 
是 PC L 浏览网豇。你的企业需要•种移动策略，不过从哪里开始呢？ 《Head 
First Mobile Web (中文版）》会告诉你如 W 使用你熟悉的 Web 技术建立网站和 
应用，可以在各种任意人小的设备 hi: 作。把你的 HTML. JavaScript 和 CSS 技 
术派上用场，然后优化你的网站， it 它在要求很高的移动布场中存最出色的表 
现。在这个过程中，你会发现如 何针对 特定的设备来调整你的业务策略。 

• 在越柬•越复杂的移动领域里自由驰骋。 

• 间时采 用技术和策略方法完成移动 Web 设I十。 

• 使用最新的开发技术，包括响应式 Web 设汁，以及利用 WURFL 完成服务 
器端设备 检测。 

• 通过图片、谜题.故事和问答轻松学习。 




■W 用光 进式增舜 . 

雉式和沾 If 虚茲 


边棉在用 


让网站货 f_) - 未來 奋衿-更 
这 1:4 备 # 否 淹未琅漱出 : ft 


i«f W 站 
tl - 它在丢机 
扣乎槌 t , 祖 
I :耷在本麥 
I ：同蜱表现 


5 糾用户的设备拉宅成分烫 . 4 备 


为什么迖本书如此乌众不罔？ 

我们认 为. 你的时间如此 宝敗， 不应过多 地浪费 ft 与新槪 念的斗争中。通过使 
用认知科学和学勾理论的最新研究成果，你将享受-种多感官学习体验，本朽 
采用 广一种专 N 为你 的大脑而设计的丰 富格式娓娓道来， 而4、足长益累犊地说 
教， ih 你昏昏欲睡。 


O'Reilly Media. Inc . 授权中国电力出版社出版 
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**《Head First Mobile Web 
(中文版）》成功地展示了 
大量实用技术.所有读者 
都能立即上手.另外还提 
供了丰富的基础资源，使 
有经验的开发人员如虎添 
翼。 Lyza 和 Jason 针对当今 
这个移动 Web 开发的纷繁 
世界.以实效为宗旨为我 
们娓娓道来.还让我们有 
机会了解到该如何面向未 
来。” 

Stephen Hay, 

Zero Interface 
的创始人和负责人 

*《Head First Mobile Web 
(中文版）》对这个复杂但 
令人兴奋的主题提供了完美 
的诠释，从一开始就着手 
实践.对于在 Web 设计领 
域探索时可能遇到的机会 
和挑战做了绝妙的介绍。” 


Stephanie 



此简体中文版仅限于在中华人民共和国境内（但不允许在中国香港.澳门特别行政区和中国台湾地区）销售发行 

This Authorized Edition for sale only in the territory of People's Republic of China (excluding Hong Kong , Macao and Taiwan ) 
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对 《Head First Mobile Web » 的高度赞誉 


“如果你考虑买一本关子移动开发的朽，希望能跨浏览器而且适应不同的开发商，那就赶紧把 
《Head First Mobile Web (中文 版）》 收入囊中吧。写这本书的人绝顶聪明，在移动领域有着丰 
富的经验，而且他们并不满足干一个平台，而是在所有平台上都有历练。很多开发人员可能花 
很长时间讨论该开发原生应用还是 Web 应用。这本书由浅入深，以通俗易懂的方式从浅显的入 
门知识过渡到 A 级主题，使你轻松掌振创建移动内容所需的全部知识。” 

- Andrea Trasatti, DeviceAtlas 项目领导人， 

无线设备能力信息 WURFL 存储库的共同创建人 


“针对当今这个移动 Web 开发的纷繁世界，这本书以实效为宗旨为我们娓娓道来，还让我们有机 
会了解到该如何面向未来 。 《Head First Mobile Web (中文 版）》 成功地展示了大量实用技术, 
所有读者都能立即上手，另外还提供了丰富的基础资源，使有经验的开发人员如虎添翼。” 

- Stephen Hay, Web 设计人员，开发人员，演讲人， Mobilism 会议的共同创办人 


“ 《Head First Mobile Web (中文 版）》 从•开始就着手实践，对于在 Web 设计领域探索时可能遇 
到的机会和挑战做了绝妙的介绍。” 

- Bryan 和 Stephanie Rieger, yiibu.com 创建人 



对其他 Head First 书的赞誉 


“ 《Head First Object-Oriented Analysis and Design )) 采用一种全新的视角研究 OOAD 。 这本书独树 
一帜之处在干它着眼于学习。作者们不仅让实践者能很好地理解 OOAD 的内容.更 t 要的是能让他 
们真正使用这些内容。” 

- Ivar Jacobson，Ivar Jacobson Consulting 


“我刚刚读完 《 HFOOA & D 〉〉， 实在太客欢这本书了！这本书最 It 我称道的是它重点讨论了我们为 
什么要使用 OOA & D 来编写优秀软件！” 

- Kyle Brown , 杰出工程师 ， IBM 

“在有趣的图片和夸张的字体后面，是对00分析与设计认真、睿智的介绍，所有内容都做 T 梢心设 
计。读这本书时，我感觉就像是站在一个资深设计人员肩上，他一直在为我解释毎一步有哪些重 
要的问题，并且告诉我为什么。” 

— Edward Sciore ， 副教授，波士顿学院计算机科学系， 

波士顿学院 


“总之•句话 ， 《Head First Software Development )) 对任何想要提升编程技术的人来说都是一个绝 
好的资源，它能让各个不同层次的读者都乐于参与其中。” 

- Andy Hudson, Linux Format 


“如果你还是一个软件开发新手 ， 《Head First Software Development 》〉 能11：你有•个正确的起 
点。如果你是一个有经验的开发人员（在这个领域已经打拚多 年）， 也不要那么急子把它抛在一 
边 …… w 


- Thomas Duff, Duffbert's Random Musings 

“ 《Head First Java 》 适合所有人。不论是视觉学习者还是动觉学 >1 者，每个人都能从这本书中学 
到东西。视觉效果可以让知识更容易记住，这本书采用了一种非常易读的方式编写，这与大多数 
Java 手册截然不同……它是一本极有价值的书。我发现 《Head First books )) 已经用于课堂，这包 
括高中以及成人考试课程。我肯定还会参考这本书，当然也会告诉别人参考这本书。” 

- Warren Kelly ， Blogcritics.org, 2006 年 3 月 

“不再是一种照本宣科式的学习 ， 《Head First iPhone and iPad Development )) 提供了一种_默风趣、 
生动形象甚至充满乐趣的方式来学习 iOS 开发。这里涵盖了很多关键技术，包括核心数据甚至诸 
如接口设计等重要方面，这些内容都经过精心挑选，而且都是最顶尖的新技术。你在哪里能看到 
UlWebView 和 UITextField 居然能坐在一起亲切交谈！” 

- Sean Murphy, iOS 设计师和开发人员 





对其他 Head nrst 书的赞畨 


^ 《Head Rrst Java 》 第二版还有一个优点，它能满足更多人的口味。现在它涵盖了一些更高级的主 
题，如 Swing 和 RMI ， 你可能争已经等不及想要深入了解这些 API ， 用 Java . net 编写长达十万行代码 
却无一点瑕疵的程序，这会让你名利双收。书中还提供了有关网络和线程的大量资料，甚至一些 
最佳实践，这是我的弱项。在这方面，我实在要多夸几句，作者们居然用一个20世纪50年代的电 
话接线员（嗯，你知道的，就是那种带着耳机人工接线的女生）模拟 TCP / IP 端口……你真得到书 
店翻翻 《Head First Java 》 第二版。即使你已经了解 Java ， 也可以从中获得一到两个收获。如果没 
有，不妨随手翻翻，这也很有意思。” 

- Robert Eckstein ， Java.sun.com 

“当然，并不是 《Head First Java )) 的内容让其独树一帜，它的突出之处在于这本书的风格和方法。 
利用卡通画、谜题、冰箱磁贴（没错，就是冰箱磁 貼）， 使得这本书绝不是你以前见过的计算机 
科学教材或技术手册。另外，取代常见的读者练习，这本书要求你假扮成编译器来编译代码，或 
者可能要通过填空来组织一些代码，或者……你懂的。这本书的第一版是我向初学 Java 和对象的 
人推荐的书目之一。这个新版本也没有让我失望，它很好地延续了上一版的优点。如果你像很多 
人一样，看着一本传统的计算机书就昏昏欲睡，相信这本书肯定能让你一直保持清醒，乐干继续 
学习。” 


- TechBookReport.com 


“ 《Head First Web Design 》 是掌握所有 这些复 杂主题并了解 Web 设计领域最新进展的钥匙。如果你 
用过类似 Dreamweaver 的棘手工具并深受折磨，这本书将是掌握优秀 Web 设计的绝好途径。” 

- Robert Pritchett, MacCompanion 


“还能从书中学习真正的 Web 设计，这可能吗 ？ 《Head Hrst Web Design 》 就是设计用户友好的网站 
的法宝，让你对网站开发全过程的设计有所丫解，从客户需求，到手绘情节图板，再到正常运行 
的在线网站。这本书与其他教你‘如何构建网站’的书有一个最大的不同，它使用了关于认知科 
学和学习的最新研究成果，为读者提供 r 一个包含丰畜图片的视觉学习过程，设计这种学习方式 
就是为了让大脑更好地工作和学习。成果很明显，这将成为 Web 设计基础的强有力补充，任何通 
用计算机库都能从中找到成功之路。” 


- Diane C. Donovan , California Bookwatch: The Computer Shelf 


“我要向所有涉及艺术方面的程序员同事推荐 《Head First Web Design 》 。” 


- Claron Twitchell , Utah Java 用户组 




CTReilly 的其他相关图书 
jQuery Cookbook 
jQuery Pocket Reference 
jQuery Mobile 

JavaScript and jQuery: The Missing Manual 

O’Reilly 的其他 Head First 系列图书 
Head First C# 

Head First Java 

Head First Object-Oriented Analysis and Design (OOA&D) 

Head First HTML with CSS and XHTML 

Head First Design Patterns 

Head First Servlets and JSP 

Head First EJB 

Head First SQL 

Head First Software Development 

Head First JavaScript 

Head First Physics 

Head First Statistics 

Head First Ajax 

Head First Rails 

Head First Algebra 

Head First PHP& MySQL 

Head First PMP 

Head First Web Design 

Head First Networking 

Head First iPhone and iPad Development 

Head First jQuery 

Head First HTML5 Programming 



献给我的家族中非凡的女性们：妲姐 Maggie 、 Momula 和 Fran ; 
姨妈 Catherine ; 继母 Christie , 最重要的，要献给我永远怀念的 
祖母 Pearl , 她旺盛的精力和自主精神鼓舞了一代又一代。 

- Lyza 


感谢我的父母很多年前买了那台 Cormnodore 64,感谢我亲爱 
的妻子 Dana , 没有你的支持和理解，就没有这本书，还要感谢 
Katie 和 Danny 。 哈，爸爸终千可以和你们一起玩啦。 


- Jason 



作者 




JflSOA 


Lyza Danger Gardner (@ lyzadanger ) 是一位开发人 
员。 她从19%年就在 Web 领域打拼。 Lyza 实际 h 出生 
在美国俄勒冈的波特兰，并在那电长大，让人奇怪的 
是，那是一个人人都想去的小镇，但似乎没有哪个名 
人来自那里。 

Lyza 很早就上了大学，她的教疗经历很 杂乱： 最初获 
得了波特兰州立大学艺术和文字文学学上学位，后来 
又参加 r 伯明翰大学计算机科学专业的-个硕士研究 
生计划。 

Lyza 编写过很多 Web 应用（主要是服务器端歼发）， 
做过漂亮的内容管理系统，对移动网站做过优化，开 
发过多个 API , 还参与了很多数据库 I ：作。如今她对 
移动技术带来的改变相瑪着迷，正在考虑 Web 、 移动 
等技术的未来。 

从共同创办 Cloud Four 以来（这是一家总部设在波特 
兰的移动 Web 代理机 构）， 2007年， Lyza 开始向设备 
领域进军，着手研究移动浏览器和移动 Web 的种种问 
题。她有一大堆奇怪的爱好，据说她拍了相当多的 
照片。她拥有一个 . com 域，域名是4个字母。相信你 
肯定能猜出这是什么，并想去看看。 


2000年， Jason Grigsby 得到了他的第一部手机。他 
开始考虑如果所有人都能利用他们手中的设备访问信 
息，这个世界会有怎样的改观。他的妻子 Dana 遇见 
他时，他 JH 痴迷于他的移动梦想。直到今天，他还在 
疑惑她居然嫁给 f 他。 

这呰移动梦想被现实打碎 f ， WAP 没有获得成功。 
所以 Jason 继续从事 Web 领域的工作，直到2007年 
iPhone 的问世表明时机终干来了。他同他熟知的3个 
顶尖人物合作创办了 Cloud Four 0 

从合作创办 Cloud Four 以来，他的运气一直不错，参 
与了很多非常棒的项目，包括 Obama iPhone App 。 他 
是 Mobile Portland 的创始人和总裁，这是当地一家非 
誼利机构，专门致力于在俄勒 M 的波特5推广宣传移 
动社区。 

Jason 是移动领域很受欢迎的演讲人和顿问。说实在 
的，与2000年时相比，他现在对移动领域更为痴迷。 

在 http :// cloudfour . com 和他的个人网站 
http :// userfirstweb . com 上可以找到他的博客，另外可 
以在 Twitter 与他联系 （@ grigs ) 。记得要问好哦！ 
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如何使用这本书 





a 


你现在的位置 ► 



如何使用这本书 


淮适含着迖本书？ 

如果对下面的所有问题都能靑定地回答“ 是”： 

O ) 以前有 Web 设计或开发经验吗？如果你有编写脚本的经验， 
^这肯定也有帮助。我们并不是在讨论火箭科学，没有那么 
难，如果你看到一个 javaScript 片段，大可不必惊慌失措。 


® 你是不是想学习、理解、记住并应用重要的移动 Web 概念， 
让你的移动 Web 页面更有交互性、更让人兴奋？ 

@你是不是更喜欢一种轻松的氛围，就像在晚餐餐桌上交谈一 
样，而不愿意被动地听枯燥乏味的技术报告？ 

这正是你要 的书。 


谁 ST 能不适含着这本书？ 

如果满足下面任何一种 情况: 


0你是不是对 Web 开 发一无 所知？ 


Q ) 你是不是己经在幵发移动 Web 应用或网站，正在找一本关于 
移动 Web 的参考书？ 


@你是不是对新鲜事物都畏首畏尾？只喜欢简单的样式，而不 
敢尝试把条纹和格子混在一起看看？你是不是觉得，如果加 
入了非凡海象酒吧和一个名叫花格布爱好者的应用，这样一 
本书肯定不是一本正经八百的技术书？ 


那么，这本书将不适合你。 


[康 tl 韦泛的摩咅 ： o 鬌 乓項起 不 
论妥用作用卡21 现倉 IpsTfe / •呀 
有这本本琛矛也7•传. 一— . y m 
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我们知遙你在想什么 


| 这算一本正经八百的移动 Web 开发书吗？ 


我们也知遂你的大胎 正在想 什么 


o 


你的大脑总是渴求一些新奇的东西。它一直在搜寻、审视、期待着不寻常的事 
情发生。大脑的构造就是如此，正是这一点才让我们不至于墨守成规，能够与 
时俱进。 


我们每天都会遇到许多按部就班的事情，这些事情很普通，对于这样-些例 j 
行的事情或者平常的东西，你的大脑又是怎么处理的呢？它的做法很简单 ，I 
就是不让这些平常的东西妨碍大脑真正的工作。那么什么是大脑真正的工作 
呢？这就是记住那些确实重要的事情。它不会费心地表记乏味的东西，就好像 
大脑里有一个筛子，这个筛子会筛掉“显然不重要”的东西，如果遇到的事情 
枯燥乏味，这些东西就无法通过这个筛子。 ( 


那么你的大脑怎么知道到底哪些东西重要呢？打个比方，假如你某一天外出旅 
行，突然一只大老虎跳到你面前，此时此刻，你的大脑还有身体会做何反应？ 


神经元会“点火”，情绪爆发，释放出一些化学物质。 


好了，这样你的大脑就会知道 

这肯定很重要！可不能忘记了 ! 


不过，假如你正待在家里或者坐在图书馆里，这里很安全，很舒适，肯定没有 
老虎。你正在刻苦学习，准备应付考试。也可能想学一些比较难 ^■■一 
的技术，你的老板认为掌握这种技术需要-周时间，最多不超过 
十天。 


这就存在一个问题。你的火脑很想给你帮忙。它会努力地把这些 
显然不太重要的内容赶走，保证这些东西不去侵占本不算充足的 
脑力资源。这些资源最好还是用来 id 住那些确实重要的事情，比 
如大老虎，再比如遭遇火灾等。就像你的大脑会让你记住绝对不 
能再穿着短裤去滑雪。 j 

没有•种简单的办法来告诉大脑 ：“嘿 ，大脑，真是谢谢你了， 
不过不管这本书多没意思，也不管现在我对它多么无动于 
衷，但我确实希望你能把这些东西记下来。” 
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那么，怎么学习呢？首先必须获得知识，然后保证自己确实不会忘记6这可不是填鸭式的硬 
塞。根据认知科学、神经生物学和教肓心理学的最新研究结果，学习的途径相当丰寓，绝非只 
是通过书本上的文字。我们很清楚怎么让你的大脑兴奋起来。 


*^7, 看得到。与单纯的文字相比，图片更能让人记得住，通过图片， 

- - 学习效率会更高 （对 于记忆和传递型的 学习， 甚至能有多达 

^ I 89%的效率提升> • 而且图片更 . ^- 

為_放在另外的-页上•与此不 

丄‘一士 同.如果把文字放在与之相 ° 0 

关的图片内部，或者在田片的周围写上相关文字.学习者的能力躭能得到多至两倍的提高. A 

从而能更好地解决有关的问题. 


采用一种针对个人的交谈式 风格。 最新的研究表明，如果学习过程中采用一种第一人 
称的交谈方式直接向读者讲述有关内容.而不是用一种干巴巴的语谓介绍.那么学生 % 

在学习之后的考试中成缡会提离40%.正确的做法是讲故亊，而不是做报告。要用通 ^ 

俗的语言.另外不要太严肃0如果你面对着这样两个人.一个是你在餐会上结识的很有 
意思的朋友，另一个人学究气+足，喋喋不休地对你说教.在这两个人中，你会更注意 哪一个 
呢？ 


让学习的人想得更深。换句话说，除非你很积极地让神经元活动起来.否則你的头脑里什么也 
不会发生，必须引起读者的好奇，促进.要求并鼓励读者去解决问题.得出结论，产生新的 
知识.为此.需要发出挑战，留下练习题和拓宽思路的问题.并要求读者完成一些实践活动， 
让左右脑都开动起来.而且要利用到多种思维. 


引起读者的注意.而且栗让他一直保持注意。我们可齙都有过这样的 体 

验， ••我 具的想把这个学会.不过看过一页后实在是让我昏昏 欲睡- ，你的大 
脑注意的是那些不一般、有意思，有些奇怪，抢眼的，意料之外的东西.学习一项 
有难度的新技术并不一定枯燦。如果学习过程不乏味.你的大脑很快就能学会. 


彩响读者的情绪-现在我们知道了，记忆能力很大程度上取决于所记的内容对我们 
的情绪有怎样的影如果是你关心的东西，就肯定记得住。如果让 你慼受 到了什 
么，这些东西就会留在你的脑海中，不过.我们所说的可不是什么关于男孩与狗 
的伤心故寧。这里所说的情绪是惊讶，好奇.觉得有趣.想知道 •* 什么……"还 
有就是一种自豪感，如果你解决 了一个 难题，学会了所有人都觉得很难的东西， 
或者发现你了解的一些知识竟 ft 那些自以为无所不能的傲慢家伙所不知道的，此 
时就 会有一 种自豪感油然而生. 
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无汄 知： 有兵思考的思、考 

如果你真的想学，而且想学得更快、更深，就应该注意你怎样才会专注起来， 

考虑自己是怎样思考的，并了解你的学习方法。 

我们中间大多数人长这么大可能都没有上过有关元认知或学习理论的课程。我 
们想学习，但是很少有人教我们怎么来学习。 

不过，这里可以做一个假设，如果你手上有这本书，你想学习项目管理，而且可 
能不想花太多时间。如果你想把这本书中读到的知识真正用起来，就需要记住 
你读到的所有内容。为此，必须理解这些内容。要想最大限度地利用这本书或 
其他任何一本书，或者掌握学习经验，就要让你的大脑负起责来，要求它记住 
这些内容。 

怎么做到呢？技巧就在于要让你的大脑认为你学习的新东西确实很重 
要，对你的生活有很大影响。就像老虎出现在面前一样。如若不然， 

你将陷人旷日持久的拉锯战中，虽然你很想 记住所 学的新内容，但是你 
的大脑却会竭尽全力地把它们拒之 门外。 

那么究 ft® 样才能让大腩把移动 Web 开发看作是一只饥饿的老虎呢？ 

这有两条路，一条比较慢，很乏味。另一条路不仅更快，还更有效。 

慢方法就是大澂地重复。你肯定知道，如果反反复复地看到同一个东西， 

即便再没有意思，你也能学会并记住。如果做 f 足够的重复，你的大脑就会说，“ 
尽管看上去这对他来说好像不重要，+过，既然他这样一而再，再而三地看 N —个 
东西，所以我假定这应该是重要的。” 

更快的方法是尽一切可能让大脑活动起来，特别是开动大 脑来完 成不同类型的活动。 
如何做到这一点呢？上一页列出的学习原则正是一些主要的可取做法，而且经证实， 
它们确实有助于让你的大脑全力以赴。例如，研究表明，把文字放在所描述图片的 
中间（而不是放在这一页的别处，比如作为标题，或者放在正文中），这样会让你 
的大脑更多地考虑这些文字与图片之间有什么关系，而这就会让更多的神经元点火。 
让更多的神经元点火=你的大脑更有可能认为这些内容值得关注，而且很可能需要 
记下来。 

交谈式风格也很有帮助，当人们意识到自己在与“别人”交谈时，往往会吏专心， 
这是因为他们总想跟上谈话的思路，并能做出适当的发言。让人惊奇的是，大脑并 
不关心“交谈”的对象究菀是谁，即使你只是与一本书“交谈”，它也不会在乎！ 
另一方面，如果写作风格很正统、干巴巴的，你的大脑就会觉得，这就像坐在一群 
人当中被动地听人做报告一样，很没意思，所以不必在意对方说的是什么，甚至可 
以打瞌睡。 



+过， 图片和交谈风格还只是开始而已，能做的还有很多。 


你现在的位置 ► 
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如何使用这本书 


我们是迖么 做的: 


我们用了很多图，因为你的大臉更能接受看得见的东西，而不是纯文字。对你的人眙来 
说，一图胜千言。如果既有文字又有图片，我们就会把文字放在图片当中，因为文字处在 
所描述的图片中间时，大脑的工作效率更高，倘若把这些描述文字作为标题，或者“淹 
没”在别处的大段文字中，就达不到这种效果了. 

我们采用了重复手法，会用不同方式，采用不同类型的媒体，运用多种思维手段来介绍同 
一个东西，目的是让有关内容更有可能储存在你的大脑中，而且在大脑中多个区域都有容 
身之地。 


一一 



我们会用你想不到的方式运用槪念和图片，因为你的大脑喜欢新鲜玩艺。在提供图和思想 
时，至少会含着-些情绪因素，因为如果能产生情绪反应，你的大脑就会投入更大的注 
意。而这会让你感觉到这些东西更有可能被记住，其实这种感觉可能 R 是有点幽默，让人 
奇怪或者比较感兴趣而已。 


崎 T 


Drii/q 


我们采用了一种针对个人的交谈式风格，因为当你的大脑认为你在参 y —个会谈，而不是 
被动地听一场演示汇报时，它就会 E 加关注。即使你实际上在读一本书，也就是说在与 
书“交谈”，而不是真正与人交谈，但这对你的大脑来说并没有什么分别。 

在这本书里，我们加入了大董实践活动，因为与单纯的阅读相比，如果能实际做点什么， 
则你的大脑会更乐于学习，更愿息去记。这些练习都是我们精心设计的，有一定的难度， 
但是确实能做出来，因为这是大多数人所希空的。 

我们采用了多种学习模式，因为尽管你可能想循序渐进地学习，但是其他人可能希望先对 
整体有一个全由的认识，另外可能还有人只是想看一个例 r 。 不过，不管你想怎么学，要 
是同样的内容能以多种方式来表述，这对毎一个人都会有好处。 



这里的内容不只是单单涉及左脑，也不只是 il ： 右脑有所动作，我们会让你的左右脑都开动 
起来，因为你 的大眙 参与得越多，你就越有可能学会并记住，而且能更长时间地保持注意 
力。如果只有一半大眙在工作，通常意味着另一半有机会休息，这样你就能更有效率地 
习更长时间。 


功 Fireside Chats 

; 華奉 


我们会讲故事，留练习，从多种不同的角度来看同一个问题，这是因为，如果要求大脑做 
一些评价和判断，它就能更深入地 学习。 

我们会给出一些练习，还会问一些问题，这些问题往往没有直截 r 当的答案，通过克服这 
些挑战，你就能学得更好，因为 让大眙 真正做点什么的话，它就更能学会并记住。想想 
吧，如果只是在体育馆里看着別人流汗，則对于保持你自己的体形肯定不会有什么帮助， 
正所谓临渊羡鱼，不如退而结网。不过另一方面，我们会竭尽所能不让你钻牛角尖，把劲 
用错了地方，而是能把功夫用在点子上。也就是说，你不会为弄明 d —个难懂的例子而耽 
搁，也不会花太多时间去弄明白一段艰涩难懂而且通箱行话的文字，我们的描述也不会太 
过简洁而让人无从下手。 

我们用了拟人手法。在故事中，在例子中，还有在图中，你都会看到人的出现，这是因为 
你本身是一个人，不错，这就是原因。如果和人打交道，相对干某件东西而言，則你的大 
脑会更为关注。 
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玎认用7面的方法 
让你的大胎就菹 

好了，我们该做的已经做了，剩下的就要看你自己的了。以下提示可以作为 

一个 起点： 听一听你的大脑是怎么说的，弄清楚对你来说哪些做法可行，哪 

, . 些做法不能奏效。要尝试新鲜事物。 

龙 (5 — 毋鼻 下乘 


® 慢一点。你理解的越多，需要记的就越少。 

不要光是卷看就行了。停下来，好好想•想。朽中 
提出问题的时候，你不要直接去翮答案。吋以假想 
真的有人在问你这个问题。你让大脑想得越深入, 
躭越有可能学会并 id 住它。 


(D 讲出来，而且要大声讲出来。 

说话可以刺激人脑的另一部分。如果你想肴懂什 
么，或者想更牢地记住它，就要大声地说出来。更 
好的办法是，大声地解释给别人听.这样你会学得 
更快，而且可能会有以前光#不说时不曾有的新发 
现。 


@ 做练习，自己记笔记。 

我们留了练习，但是如果这些练习的解答也由我们 
一手包办，那和有人替你参加考试有什么分别？不 
要只是坐在那电看着练习发呆。拿出笔来，写•写 
画一画。大*研究都证实，学习过程中如果能实际 
动动手，这将改蕃你的学习。 


© 听听你的大脑怎么说。 

注意一下你的人脑是不是负荷太重了。如果发现 
自己开始浮光掠影地翮看，或者刚看的东西就忘记 
了，这说明你该休息一会儿 r 。 达到某个临界点时， 
如果还是一味地向大脑里塞，这对于加快学习速度 
根本没有帮助，甚至还可能影响正常的学进程， 


@ 阅读 “ 没有傻问踴”。 

顿名思义.这些问题不是可有可无的旁注，它们绝 
对是核心内容的一部分！千万不要跳过去不看。 

® 上床睡觉之前不要再看别的书，至少不要看其他有难 
^ 度的东西。 

学习中有一部分是在你合 k 书之后完成的（特别 
是，要把学到的知识长久地记住，这往往无法在看 
书的过程中做到）。你的大脑也需要有自己的时间， 
这样才能再做一些处理。如果在这段处理时间内你 
又往大脑电灌输了新的知识，那么你刚才学的一些 
东西躭会丟掉。 

® 要喝水，而且要多喝点水。 

能提供充足的液体，你的大脑才能有最佳表现。如 
果缺水（可能在你感觉到 u 渴之前就已经缺水了）， 
学习能力就会下降。 


(8) 要有点感觉。 

你的大脑需要知道这是很重要的东西。要真正融人 
到书中的故事里。为书里的照片加上你自己的图 
题。你4能觉得一个笑话很蹩脚，不太让人满意， 
但这总比根本无动干衷要好。 


® 真正做些工作！ 

把这些知识应用到你的日常工作中去，利用你所学 
的想法完成项目决策。具体做些工作，你会得到书 
中练习和活动以外的经验所需要的只是 - 支笔和 
一个要解决的问题……通过使用针对考试所学的工 
H 和技术可以更好地解决这个问题。 
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如何使用这本书 

重要说硪 

要把这看作是一个学习过程，不要简单地把它看成是一本参考书 D 我们在安排内容的时候有意做了一些 
刪减，只要是对有关内容的学习有妨碍，我们都毫不留情地-律删掉。另外，第 次 看这本书的时候， 
要从第一页从头看起，因为书中后面的部分会假定你已经看过而且学会了前面的内容。 

希望你了解 HTML 和 CSS 。 


如果你不了解 HTML 和 CSS , 渎这本书之前请先找一本 《Head First HTML with CSS & XHTML 》 看看。 
我们会稍稍复习比较麻烦的 CSS 选择器或 HTML 元索，不过不要指望在这里学习基础知识。 

希望你熟悉 Web 脚本代码。 

我们并不要求你是世界级的 JavaScript 专家，也不要求你之前使用 PHP 完成过学位水平的计算机科学项 
目，不过在这本书中你会看到很多用这两种语言完成的例子。如果一个 for 循环都让你紧张不已（或者如 
果你根本不知道我们在讲些什么），可以找一本 《Head First PHP & MySQL 》 或 《Head First JavaScript 》 
看看，然后再来看这本书。 


希望你知道如何査找和记录。 


坦率地讲，移动 Web 是一个覆盖面很广的主题，要想掌握移动 Web ， 你现有的 Web 开发技能还不够，需 
要进一步扩展。关于 Web 需要知道的东西太多了，任何一个人都没有办法完全记住，不论是 JavaScript 语 
法细节，还是对某个 HTMLI 5 元素属性的浏览器支持的具体细节，统统都记住不太可能。不要太难为自 
己。作为一个好的 Web 开发人员，在你的众多开发利器中，一定要把 Google 这把大斧磨锋利，知道什么 
时候以及如何在网上搜寻 Web 的有关信息。相信你在这方面已经是髙手了。 

不饕仅限于这本书。 

我们要面对一个博大而美丽的移动 Web 世界。希望我们能扶你上路，顺利地开始你的旅程，不过师父领 
进门，修行靠个人。移动 Web 群体相当活跃，你要参与这个群体的在线交流，阅读相关的博客，加入感 
兴趣的邮件列表，积极地参加这个领域的技术 活动。 

书里的实践活动绝不是可有可无的。 

这里的练习和实践活动不是可有可无的装饰和摆设，它们也是这本书核心内容的一部分。其中有些练习 
和活动有助于记忆，有些能够帮助你理解，还有一些对于如何应用所学的知识很有帮助。千万不要把 
这些练习跳过不做。甚至填字游戏也很重要，它们可以帮助你把有关概念植人你的大脑。不过更重要的 
是，它们可以让你的大脑冇机会在不同的上下文思考这些词汇和槪念。 


我们有意安排了许多重复，这些重复非常重要。 


Head First 系列图书有一个与众不同的地方，这就是，我们希望你确确实实地掌握这些知识，另外希望 
在学完这本书之后你能记住学过了什么。大多数参考朽都不太重视重复和回顿，但是由于这是一本有关 
学习的书，你会看到一些槪念一而再、再而三地出现。 
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“Brain Power (头脑风暴厂拣习没有答案 3 


有一些头脑风暴练习根本没有正确的答案，另外一些练习中，头脑风暴实践活动的一部分学习过程 
就是让你确定你的答案是否正确，以及在何种情况下正确。有些头脑 K 暴练习中，你会得到一些提 
示，为你指明正确的方向。 


软件 t 隶 

与开发所有网站一样，你需要一个文本编辑器、一个浏览器、一个 Web 服务器（可以本地安装 
在你的个人计算机上），另外还要有本朽各章示例应用的源代码。 

对于 Windows , 我们推荐的文本编辑器是 PSPad . TextPad 或 EditPlus (不过，如果别无选择， 
也可以使用 Notepad ) 。对 TMac ， 我们推荐的文本编辑器是 TextWrangler (或者它的同系列工 
具 BBEdit ) ,也可以使用 TextMate 。 我们也很喜欢 Coda , 这是一个更关注 Web 的工具。 

如果你使用的是 Linux 系统，系统中已经内置 f 很多文本编辑器，那么相信不需要我们多说 
了。 

如果你要做 Web 开发，需要一个 Web 服务器。先要看看附录 ii ， 了解如何安装支持 PHP 的 Web 
服务器。建议你现在就完成这个工作。说真的，现在就动手，按照操作说明安装开发环境， 
然后再回来看这一页。 

对于第5章，你需要安装 WURFL (无线通用资源 文件） API 和数据。对于第8章，你要安装 
Android SDK 和一些相关的工具。你肯定猜到了，分别有相应的附录教你完成这些任务。 

你还需要一个浏览器，噢，应该说你需要尽可能多的浏览器来完成测«。你手上的移动设备 
(带浏览器）越多越好（别害怕。如果没有硬件，那么还有很多模拟器可供你使用）。 

对于桌面开发和测试，我们强烈推荐 Google 的 Chrome 浏览器，它在 
Mac 、 Windows 和 Linux 平台上分别有相应的版本。应该花点功夫了解如 
何在 Google 的 Chrome Dev Tools 中使用 JavaScript 控制台，这绝对是值得 
的。这个任务作为家庭作业需要你自己完成。 

最后一点，你要得到各章示例的代码和资源可以在 hUp :// hf - mw . com 上 
找到。 》 

以 I *) (i 个网鈷 上下载•子•例代极 


各 t 中例子的代 
茲和 f 源鄱 

丄*我到。 


你现在的位置 ► 
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Trevor Farlow 足一位业余由包师，作为消逍良欢踢足球， 
另外还兼职做动物保护志愿者。如果没在遛狗，跺足球或 
者褚心烤制他的纽约风格乳酪蛋糕，可能躭在 Clearwater 
Analytics . LLC 的一个精简髙效的敏拢幵发小组中学习产品 
所有权技巧。 

Brad Frost 蛙一个移动 Web 策略师，另外是纽约 R / GA 的 
—名前端开发人员，在这里他参与完成了大 t 与移动相 )(：• 
的项目。他运劳着一个资源网站，名为 Mobile Web Best 
Practices ( http :// mobilewebbestpracticcs . com ), 着力帮助人 
们创建完美的移动 Web 体验。 

Stephen Hay 已经有超过16年构违网站的经验。除了客 
户要求的 X 作外（主要是多乎台设计和开 发）， 他还在很 
多行业会议上演讲，并为很多出版商撰稿，如 A List Apart 
和 .net Magazine , 他还合作组织了 Mobilism ， 这是一个很 
受推氓的移动 Web 设计和开发会议„ 

Ethan Marcotte 是一位独立设计人员/开发人员，他对漂亮 
的设计、精巧的代码和这二者的结合相当痴迷。多年来, 
他枳累了大里客户，包括 New York Magazine、Sundance 
Film Festival、Boston Globe 和 W 3 C 。 Ethan 首创了响应式 
Web 设计 -- 词，来描述为不断变化的 Web 进行设 计的- 种 
新方法，如果有机会，則他甚至想关干这个主题写一本书。 


Bryan Rieger 是一名设计人 W 和敬业的开发人员，拥有 
剧场设 if •和经典动_制作背箓。 Bryan 已经从事过多种媒 
体行业 ，包括印刷、广播. Web 和移动。他的客户包括 
Apple , Microsoft , Nokia 和 Symbian Foundation 。 Bryan 很 
热爱讲故亊，总在修修补补，你会看到他在 Yiibu 做各种各 
样的工作，这是-家很小的设计颐问机构，总部设在苏格 
兰的爱 r 堡。 

Stephanie Rieger 愚一位设计人员、作家和人类学家，非 
常关心人们与技术交互的多种途径. Stephanie 从2004年就 
在从寧移动设计工作，现在主要关注 Web 策略，前端设计 
以及针对多屏幕和能力的优化。作为一个很有干劲的测试 
人员和研究人员， Stephanie 总是热衷干发现和分亨-关于移 
动用法、用户行为和全世界移动领域趋势的见解。 

Andrea Trasatti 1999年在 Nokia 7110上开始创 i | WAP 内容， 
那时在欧洲这被认为是开创性的技术。八11<1^ 3 领 
导猗 WURFL 和 Device Atlas 从最初起步 ft ： 到最后取 
得成功，在此期间，他在设备检测和内容适应方 
面取得了丰富成裝^ nf 以在 Twitter I •.找到 Andrea 
(@ AndreaTrasatti ) ,他经常在谈论移动 Web 以及创途和管 
理移动内容的新趋势。 
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致谢 

致 编辑： 

感谢（同时祝贺 ） Courtney Nash , 在她的推动下，我们终 f 完成广这本书， 
也 IT •这是我们锒体的 本 朽， K 期 以来， 她一釭在忍受肴我们的大钍邮件、问 
题. K ； 篇大论、心时甚罕还要接受我们的偏执。她平持带领我们完成 f 这本 
书，一在相信我们有信心克服所有困堆。另外要感谢 Brian Sawyer 玱后的 ff 促， 
带着我们冲向终点。 

致 O Reilly 人员： 



感谢 Lmi Barr 无 S ; •沦比的髙效以及迮设汁和布只方 Ifti 的卨超水我们具的叹为视止。谢谢你 
还要感谢 Karen Shaner 和 Rachel Monaghan ， 谢谢你们钻助我们修改草搞，完成令杇的屯校，还 
斛我们解决方方面面的细竹问题！ 


感谢 O’Reilly 的其余同仁, It 我们感觉到家庭般 温暧: Mike Hendrickson . 感谢你刚开始建议 
f 这个绝抄的想法， Brady Forresi , 感谢你介绍并一良支持我们 i Tim O ' Reilly , 你貞是一个存 
fV . 诚恳的好人 I 还旮 SaraWinge , 感谢你的恩威并電。 

还要 感谢： 

Jason 和 Lyza 有幸能在 Cloud Four 与群墙薄转的人-同工作《我们要特別感谢合作创办人 Ailccn 
Jeffries 和 John Keith ,还有 Cloud Four 闭队的其他 人员： Matt Gifford . Chris Higgins 和 Megan 
Notarte . 这本书实 ^ 1: 是我们在移动 Web 领域的共同结晶。他们提供 r 燉大的支抟，付出 f 敢大 
的努力 • 非常非常感谢你们 I 



还要感谢移动 Web 社区。特別地，我们要感谢 Josh Clark、Gail Rahn Frederick . Scott JchK Scott 
Jenson , Dave Johnson % Tim Kadlec、Jeremy Keith , Peter Paul Koch . Brian LcRoux . James 
Pearce . Steve Souders 和 Luke Wroblewski , 能成为这个社区的一分 f •我们很骄傲，也心介•感激。 


Lyza 的朋友和 家人： 

感谢 Bryan Christopher Fox (Other Dev ), 没有你修改代码，没有你的真知灼见，职力支持和超强锌銶， 
这本书绝尤可能出版。 

感谢我的朋友和家人，闪为写朽，我总是无法和你们在一起，谢谢你们能够忍受这段漫长时光。感谢 
Aimimn 和 Amye , 在#不到我的时候你们表现出了非凡的忍耐力 8 谢谢你， Mike , 永远感谢你。还要感 
谢亲爱的爸爸，足你总是教导我要发现美和新的 锊险。 最后，感谢威尔 iUandegla Plas - yn -卻 的 Huw 和 
Bethan , 感谢你们提供了这样一个绝妙的地方让我们写书 • 


Jason 的朋友和 家人： 

感谢我的家人给予的所有支抟。爸爸妈妈， Jan . Carol . Mark 和 Doanne ， 迨你们一如既忭的帮助，让我 
们在写朽，照顾家里和搬家的艰难历程屮一茛保持心平气和。 

特别感谢我的妻 f，Dana Grigsby , 要知道，在我写书期间，我们要照顿一个婴儿、一•个学龄前孩子. 
还要搬新家，没釕你我舆的做小到。 
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如何使用这本书 


Safari ® 橙书在线 

C a f ar j -> Safari 图书在线是个按需提供资源的数字图书馆，从中可以 
OCl !oSfo!!J 很容易地搜索7500本技术书、参考书和视频，快速找到你想 

要的答案。 

只需 iT 阅，就可以从我们的在线图书馆阅读任何页面，观看任何视颊。你可以在 
你的手机和移动设备上看书，能够在新书出版之前获得书目，还可以享有特权査 
看正在编写的书稿并向作者提出反馈意见。你可以剪切粘贴代码示例、整理最萚 
欢的图书、下载你需要的章节，为重要内容设罝书签、创建笔 id 、 打印页面，此 
外还有大量特性可以节省时间， it 你从中受益。 


O'Reilly Media 已经将这本书上传到 Safari 图书在线服务。要想通过数字方式全面 
i 方问这本书以及 O ’ Reilly 和其他出版商提 供的其 他类似图朽，可以免费注册 hup :// 
my . safaribooksonline . com 。 
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你的大脑与移动 Web 。 你想学些新东西，但是你的大脑总是帮倒忙， 
它会努力让你记不住所学的东西。你的大脑 在想： “最好留出空间来记住 
那些确实重要的事情，比如要避开哪个野生动物，还有裸体滑雪是不是不 
太好。”那么，如何让你 的大脑 就范？让它认为如果不知道移动 Web 你将无 
法生存！ 


谁适合看这本书？ 

xxii 

我们知道你在想什么 

xxiii 

我们也知道你的大脑正在想什么 

xxiii 
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XXV 
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1 移动 VVeb 入门 

响应式 Web 设计 

嘿！准备好了吗？要进入移动世界吗？ 

移动 Web 幵发绝对是一种让人惊心动魄的生活方式。它有十足的憲力，让人兴 
奋不已，欲罢不能，你会一次次地感受到顿悟的快乐！不过，这里也有谜团， 
也有困惑。移动技术正在飞速发展，需要了解的东西实在太多 r ! 快抓紧，就 
要开始我们的移动之旅 f , 我们会带着你了解一种建设网站的方法，称作响应 
式 Web 设计 (Responsive Web Design , RWD ) 。采用这种方法，可以利用你已 
经掌捤的 Web 技能适当地调整网站，让它们在各种移动设备上同样有非凡表现。 


index.html 



登上“移动”花车 
酒吧发生了怪事 
如果移动手机 Web 浏览器这么悴 
移动 Web 为什么有这么大差异？ 
响应式 Web 设计 
不同场合使用不同的 CSS 
CSS 媒体査询 
当前非凡海象网站的结构 
分析当前 CSS 
哪哗黹要改变？ 

找出洁要修改的 CSS 
创建移动 CSS 的步骤 
固定宽度布局到底有什么问题？ 
为什么流式网格布局更好？ 
流公式 

继续流式转换 
上下文切换 
这个图片怎么了？ 

流式图像和媒体 
记住你的责任 
得到一个响应式网站！ 

响应式设计也是一种精神状态 
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2 真正的响应性 

移动优先响应式 Web 设计 

这是一个漂亮的移动网站。不过漂亮只是表面。 

在内部，它根本不是那样。它可能看上去像是-个移动网站，不过仍然是一个披 
着移动外衣的桌面网站。如果我们希望这个网站成为移动世界爭.一道炫目的闪 
电，就要先从移动开始。首先分解当前的网站，找出隐藏在移动外衣 F 的桌面成 
分。我们会做个大扫除，从头开始改头换面，从构逮 基本内 容直到建立一个桌面 
视图。完成后，你会得到一个不论屏幕大小都可以优化的页面。 


非常小的屏蓽 

<功鑪 手机） 



你以为该庆祝胜利了…… 

44 

这算问题吗？我们怎么知道？ 

45 

速度不快时怎么办 

47 

不要被外表迷惑，这实际上是一个很大的页面 

48 

HAR 山里有黄金 

49 

找出影响页面速度的累赘 

51 

Google Maps JavaScript 从哪里来？ 

53 

看起来是移动友好的，但实际上不是 

55 

移动优先响应式 Web 设计 

56 

什么是渐进增强？ 

57 

修正内容浮动 

60 

移动优先媒体査询 

61 

息外！ Internet Explorer 中页面出问题了 

62 

一个 src 完全控制 

68 

在 viewport 记上控制放大 

72 

放大的权利？ 

73 

使用 JavaScript 增加地图 

74 

在 J avaScript 中逮立一个伪媒体査询 

76 

将 JavaScript 增加到 On Tap Now 页面 

77 

这些部件不是响应式的 

79 

将 iframe 属性移至 CSS 

80 

从 JavaScript 蒯除域性 

81 

又出现地图重*了 

83 

让内容成为你的向导 

84 

分界点来帮忙 

87 
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单独的移动 R 站 

直面不太好的环境 

响应式 Web 的远景固然美妙…… 

在这里，每个网站都采用一种移动优先的方法巧妙构逮，只有一个布局，可以应 
对各种设备和环境。嗯……真不错。不过，如果现实一点，考虑一些实际因素会 
怎么样呢？比如说，遗留的系统、老式的设备，另外还有町能受到顾客预算的限 
制。有些时候，如果实在不能把桌面和移动支持完美地结合在一起，是不是需要 
单独来建设？这-章中，我们会介绍有关的细节问题，包括检测移动用户，支持 
那些老式手机，以及构建一个单独的移动网站。 



Creature Comforts 的现场代理处 
代理处如何得到和分享他们黹要的信息？ 

让移动用户前往移动优化网站 
寻找移动用户 
认识用户代理 
用户 代理：魔鬼蛋 

实话 实说： 大多数主要网站都有一个单独的移动网站 
如果你真正想要的是重定向 
看一眼脚本 
这个脚本如何工作？ 

逮立一个移动模拟网站 
复杂因素 …… 的特別快递 
并不是所有手机都是智能手机……完全不是这样 
力求 基本： 认 UiXHTML-MP 
为什么我们要用这个旧东西？ 

XHTMLMP 力求简单 
顒便说 一句，还有滚动问题 
最后一个问题 
访问键的实际使用 
怎么回事？ 

修正错误 
懂移动的 CSS 
嗯 …… 少了点东西 
按钮外观没有了！ 


大获成功! 
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^决定支特淮 

我们要支持哪些设备？ 

我们实在没有那么多时间在每一个设备上测试。 


你必须划分出一个界线，确定能支持哪些设备。不过如何确定呢？有些人可能使 
用一些特殊的设备，而你无法在那些设备上测试，对于这种情况你该如 K 处理？ 
完全不考虑他们吗？或者有没有可能采用一种合适的方式构建 Web 页面，使人们 
用你从未听说过的设备也能访问？这一章中，我们将结合项目的需求和用户的使 
用情况制作一种魔法剂，帮助我们确定支持哪些设备，以及对于不支持的设备该 
如何处理。 


你怎么知道在哪里划分界线？ 

138 

稍事休息 

139 

不支持的设备与不能支持的设备 

140 

关于你的项目问几个问题 

142 

移动魔法剂的配方 

144 

利用工具和数据 

145 

我怎么知遂顿客有合适的设备呢？ 

150 




在哪里 

划分界 

线1 
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设备数锯库和类 

分组行动 

尽管能确定我们支持的设备，但有些烦人的小问题还不能解决。 

如何了解用户移动浏览器足够的信息，在向他们发布内容之前能够知道这些浏览器 
确实符合要求？如何避免只为那些最低档次的设备构逮内容（往往很简陋）？另外 
如何合理组织所有内容，以免我们焦头烂额？这一章中，我们将进入设备能力的领 
地，学习如何用设备数据库访问设备能力，最后还会介绍如何将它们归组为设备 
类，使我们能安然应对。 


学生有麻烦，提供紧急按钮 

移动设备数据源可以帮忙 

来认识认识 WURFL 

WURFL 及其能力 

WURFL : 聪明的 API 代码 

我们也吋以建立•-个资源管理页面 

资源管理 页面： 逮立我们的环境 

完成一个快速的双连击，改进我们的资源管理页面 

把这些能力信息派上用场 

使用 WURFL 帮助区分内容 

初始化设备，准备好信息 

它是移动的吗？ 

利用 WURFL 让页面更聪明一些 
紧急 按钮： 只针对手机 
设备类 



戴上移动眼镜 If 判这个主豇 
将需求分组为多种移动体验 
设备类排排啪 
熟悉匹配函数 
这个 switch 语句在做什么？ 
使用匹配函数测试能力 
填补设备类测试的缺口 
我们需要一个更大的安全网 
及时的一针 
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6 使用框架构建移动 Web 应用 

花格布爱好者 

“我们想要个应用！” 

最近一到两年，我们常常听到这样的呼吁，这通常意味着要为你想要支持的每 
—个平台完成原生代码开发和部署。不过，原生应用不再独占江山。如今，面 
向移动浏览器的 Web 应用已经蜂拥而至，特别是现在 HTML 5 和他的死党 CSS 3 
和 JavaScript 都在摩拳擦掌.跃跃欲试.下面就 iJ ; 我们利用一个移动框架更深 
入地探寻这个移动 Web 应用世界，移动框架就是专门设计用来帮助你快速完成 
工作的代码工具！ 
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7 真实世界的移动 Web 应用 

超级移动 Web 应用 

移动 Web 就像班里那个小机灵鬼。 

你知道的，就是那种很让人喜欢、聪明能千的小家伙，+过也是捉摸不 
定、让人防不胜防的淘气包。我们尽置不设置太多约束和条条框框，希 
望不扼杀他们过人的天陚，不过现在该是有效利用移动 Web 天分的时候 
了。利用渐进增强，我们可以在更成熟的浏览器中把原本简朴的界面装扮 
一新。通过建立一种周全的离线模式，能够 U : 飘忽不定的网络连接从一种 
负担转变成一个抢眼的特性。另外，通过使用地理定位可以得到移动的 
真谛。下面就来建立这样一个超级移动 Web 应用吧！ 
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用 Phowe ^ ap 构建湛含型移动 Web 应用 

花格布 搜导： 实现原生 

有时候你得实现原生。 

这可能是因为你需要访问移动浏览器（还）没有提供的某些功能。或者，也许是 
你的客户要求有 App Store 中的一个应用。我们期盼着将来能够在浏览器中访问 
我们想要的一切，希望移动 Web 应用同样拥有那些诱人的原生应用才拥有的特性。 
这种情况下，我们可以选择混合型开发，继续使用 Web 标准编写代码，再使用一 
个库在我们的代码与设备原生能力之间搭建桥梁。基于 Web 技术构建的跨平台原 
生应用？不会是一个糟糕的折中吧，嗯？ 





^ A TRIP To 


ED<NBUf?GH 


机会又来了 

314 

混合型应用如何工作？ 

317 

用 PhoneGap 填补 Web - 原生缺 U 

318 

熟悉 PhoneGap Build 

321 

应用如何工作？ 

322 

跟踪已经找到的花格布 

323 

Tartan Hunt 项目剖析 

324 

下载应用 

328 

选择你的路 

329 

看到了什么？存储找到的花格布 

334 

localStorage 能为我们做什么？ 

335 

检査浏览器支持什么 

339 

用一个函数显示哪些花格布已经找到 

340 

toggle 和 toggleClass 方法 

341 

你找到了一个花格布，是吗？那就证明看看！ 

344 

利用 PhoneGap 拍照 

345 

PhoneGap 基本准备就绪，可以出场了 

347 

现在准备使用 mediaCapture API 

348 

成功时如何处理？ 

349 

真实世界里总有点不同 

350 

只是匿名 

351 

最后一点！ 

353 

搞定了！ 

354 


xvii 




目录 



如何实现未来贪好 

应对混乱 

响应式 Web 设计、设备检测、移动 Web 应用、 PhoneGap 。 等一 
下 …… 我们该用哪一个呢？ 


移动 Web 开发方法实在太多了。通常，项目中都会结合应用多种技术。这 
方面并没有唯一的正确答案。不过不用担心。关键是要学会“随波逐流”。 
掌握不确定性。用一种未来友好的思维，顺应潮流，确保一定要灵活，能 
够适应未来的一切变化。 
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其他 

6大主题（我们没有谈到的） 

是不是感觉少了点什么？我们知道你是什么意思…… 

你以为已经完成了，但实际上还有一些事情没有做。如果不再做 
点补充（这些内容不适合放在前面的正文 里）， 我们实在不忍心就 
此放手。至少如果你还没有一个带轮子的金属旅行箱，躭想带着这 
本书闯荡世界，那是肯定不行的。来看看（还）少哪些内咨。 
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建 iWeb 服务器环璜 

就要开始了 

没有 “ Web ” ，“移动 Web ” 无从谈起。 

对于这一点绝对没有异议。如果要完成移动 Web 开发，肯定需要有一个 Web 服务 
器。这远不只是完成本书中的练习那么简单。你要把你的 Web 托管内容放在某个 
地方，不论是使用一个第三方商业 Web 托管服务，还是企业级数据中心，或者甚 
至是你自己的计算机。在这个附录中，我们将带领你在你的计算机上逐步建立一 
个本地 Web 服务器，件使用免费开源的软件运行 PHP 。 


你要做的准备 

388 
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安装 WURFL 

搜寻设备 

要揭开设备检测的神秘面纱，第一步要做些调查工作。 

优秀的侦探都知道，要解开谜团，必须搜集线索，询问目击证人.首先，我们要找 
出行动的策 划者 ： WURFL PHP API 。 接下来，追踪行 动者： 将数以千计设备的能 
力信息放在一个 XML 数据文件中。不过还需要做些协调，才能让它们协作解决整件 
事情，所以我们要对配置稍做调整，认真做些笔记。 


谁是策划者？ 

398 

谁来行动？ 

399 

让二者协作 

400 

做一点文件系统“家务活” 
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记笔记！ 
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安装 Android SPK 和工異 

完善环境 

要成为测试原生 Android 应用的王人，必须当心环境。 

要把你的计算机变成一个条件宜人的小环境，在这1你可以在虚拟（模 拟） 设 
备或真实设备上“放牧” Android 应用。为了让你成为合格的牧羊人，管理好这 
些 Android 小羊，我们会告诉你如何下栽 Android 软件开发包 （Android Software 
Development Kit , SDK ) ，如何安装一些平台工具，如何创建-些虚拟设备，以及 
如何安装和卸载应用。 


下载 Android SDK 

404 
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413 
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/移动 Web 入门 



嘿！准备好了吗？要进入移动世界吗？ 


移动 Web 开发绝对是一种让人惊心动魄的生活方式。它有十足的晚力，让人兴 
奋不已，欲罢不能，你会一次次地感受到顿悟的快乐！不过，这里也有谜团, 
也有困惑。移动技术正在飞速发展，需要了解的东西实在太多了！快抓紧，就 
要开始我们的移动之旅了，我们会带着你 了解一 种建设网站的方法，称作响应 
式 Web 设计 (Responsive Web Design , RWD ) 。采用这种方法，可以利用你已 
经掌握的 Web 技能适当地调整网站，让它们在各种移动设备上同样有非凡表现。 


这是新的一章 




这是一个移动世界 

登上“移动”铊车 

你很可能已经有一部移动手机。我们知道，这不光是因为你买了这本书 
(顺便夸一句，买得好），还因为现在真的很难找到一个居然没有移动手 
机的人。 


不论你身处 H 地，都能见到移动手机的身影，比如尼日利亚的农民会用 
移动手机査看他们的农产品在哪个市场卖价最高，再比如日本的十大最 
畅销小说就是在移动手机 i ： 销售和写作的（没错，作者们确实在用移动 
手机写小 说）， 可以说，移动手机的使用已经遍及全世界各个角落。 


20 H 年初，全球69亿人使用的移动手机数达到52亿部。使用移动手机的 
人甚至比用马桶和牙刷的人都多。 

鱿是现在 

没错，移动的覆盖面很广，不过并不只是现在才这样，多年来这一直是 
个庞大的群体，为什么要现在登上“移动”这驾花车呢？ 



这是因为， iPhone 改变了一切。听上去有些夸张，但确实如此。 
在 iPhone 出现之前，也有应用商店 （App Stores ) ,也有触摸屏和 Web 浏 
览器，但是 Apple 公司首次用•种便于人们理解和使用的方式把它们结合 
在了一起。 


. 今备寶 ■ i ： 花孳令， 


2 第 1 章 



入门 



iPhone 非常棒，不过出于不同的原因.人们还在使用各种不同的 
手机。鼉流行的手机不会一成不变。 

我无从得知你读这本书时最火的手机会是什么。3年 
前， Android 还只是部署在雷达上.而在201丨年，它已经摇身一 
变成为全世界最热门的智能手机平台。 

移动技术的变化很快，不过有几个方面我们很有信心： 


O 所有新手机上都会有 Web 浏览器。 


你可能发现一个新手机里没有 Web 浏览器，不过你得再仔细 看看， 
现在即使最基本的手机也会内置一些不错的浏览器。所有人都希望 
能通过手机上网浏览。 


O 移动 Web 应用会超越桌面 Web 应用。 


通过移动手机上网的人数很快就会超越利用计算机上网的人数。实 
际上，很多人已经发现他们用手机比用 PC 更频繁。 


O Web 是唯一真正的跨平台技术。 

iPhone , Android 、 BlackBerry、Windows Phone , WebOS 、 
Symbian . Bada 等，还有很多手机平台，我们无法一一掌握。每个 
平台都有相应的编程接口，这意味着如果你希望为每一个平台编写 
软件，就必须每一次都从头开始。 

移动 Wob 当然也存在自己的罐題.不过它允许你刨建适用于所有平 
台的内容和应用，在这方面没 有囑神 技术能罅与之匹敌。 


所以，事不宜迟，箭在弦上，移动 Web 就要起飞了，出发吧! 


你现在的位置 ► 
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欢迎来到非凡海象酒吧 


涌吒芨生？佺事 

Mike 经营着一个酒吧，名字很可爱，叫作非凡海象 
(Splendid Walrus) ，在当地有一群忠实的扮丝。 Mike 经常 
会提供一些特別的啤洒供大家享用，还会在他的网站 h 特 
別标出。 


在 Mike 实现他成为酒吧老板的人生梦想之前，曾做过 Web 
开发人员。所以，为非凡海象洒吧建立一个美观大方的网 
站，这对他来说不算 难事。 
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如梁移动手机 Web 浏览器达么梯…… 

这个非凡海象网站是 Mike 几年前建立的，那时移动浏览还很初级, 
也很少见。这个网站是基于 Firefox、Internet Explorer 和 Safari 之类 
的桌面浏览器构建的，当然也只是在这些浏览器中做过测试。 

很多更新的移动浏览器口碑不错。它们越来越精巧，也越来越强 
大，俨然与那些桌面浏览器相差无几。 

……是不是没问超？？ 

Mike 在他的 iPhone 4上浏 览非凡 海象网站，结果 ii : 他大跌眼镜。在 
一个朋友的 Android 设备上网站的表现也差强人意。 
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全新的移动 Web 设计世界 


移动 Web 为什么有达么大差异? 




0 K , 可能没有那么多。不过，在做移动 Web 开发时，有时就会 

有这种感觉，我们只有为数不多的几个领先的桌面浏览器，但~你以婷 tieea 

移动浏览器就不同了，可能有成百上千个之多。千真万确！ ■翔《穷移幼 

O 对 Web 技术的支持千差万别， ttia 

ThaLLayui 

在较早的移动浏览器上（或者甚至在能力较逊的设备上运行 
最新的浏览器时），可能要完全忘掉原本可以信赖的 CSSS 
JavaScript . 甚至最新的浏览器也未提供某些支持，或者支持 
的方式截然不同，也可能存在奇怪的 bug 。 这完全是一个纷乱 
的蛮荒世界，真的！ 


o 移动设备更小，更慢。 


没错，这一点我们很清楚。较新的移动设 备是一 些拥有最新技 
术的便携式计算机。不过与桌面计算机（或笔记本 电脑） 相比， 
在处理能力方面它们还是稍逊 一筹。 移动网络可能很脆弱，而 
且可能速度很慢，数据传输不一定是免费或不受限的 Q 这说明， 
要从性能角度考虑漯亮但庞大、富媒体的复杂网站。 


o 移动接口要求重新考虑我们的网站。 

移动浏览器确实可以呈现桌面网站（只是可能会稍稍有些停 
顿）， 但并不能因为能够这么做就应该这么做。现在屏幕变小 
了，交互和我们的期望也有所不同. 

有移动设备的人可能使用各种各样的输入 设备： 手指.写字 
笔、黑莓手机上的小按钮等。不论是写字还是填写表单都很乏 
味，更何况还可能出现错误。要让用户眯着眼睛 在一个 原本为 
桌面浏览器窗口设计的表单中写入内容，这会让他们头疼甚至 
抓狂。这种痛苦你应该懂的。 
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练习答案 



你发现这些问题了吗？ 
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Frank ： 等一下。我们知道， Mike 用简洁、明确的 HTML 标 
记搭 r 一个不错的架子，还使用 CSS 尽可能完苒地控制了布 
局和样式。 

Jim ： 那又怎样？这当然很好，很专业，不过对我们改进网站 
有什么帮助呢？ 

Frank : 嗯，我们先好好想一想。査看他在非凡海象网站中使 
用的 CSS 时，我注意到有很多宽度和大小定义，以适应960像 
素的方框。看起来他是在•个960像素的 窗口上 设计的这个网 
站，而 R 分为三栏。 

Jim ： ……不过大多数移动设备的显示屏都远远小干960像索。 
另外，对一个比较小的屏慕来说，3栏显得有些太多了。 

Frank ： 所以说…我在想……能不能对移动设备使用不同 
的 CSS ? 比方说，为适应320像素设计的 CSS (这是很多智能 
手机屏幕的宽度）？另外，是不是可以减少栏数？ 

Jim ： 好主意， Frank e 不过除了做 大量服 务器端编程，我想 
不出有什么办法能够做到。我的意思是说，我们怎么让移动 
设备使用完全不同的 CSS 呢？ 

Frank ： 知道吗? Jill 刚开完 Awesome Cool Mobile Web Camp 
会议回来，还在为那种叫作响应式 Web 设计 (Responsive Web 
Design ) 的技术激动呢！ 

Jim ： 我怎么能忘呢？她一天到晚都在谈论这个。 

Frank ： 对啊，她说这个技术正在受到 Web 开发人员的关注, 
听上去好像（至少在某种程 度上） 是关干针对不同的情况应 
用不同的 CSS , 而不需要做繁重的编程工作。很显然，这对 
干开发移动网站尤其有用。我记不得具体的细节了，不过我 
们可以查査看。 
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响应式 web 设计 


响应式 Web 设计 


响应式 Web 设计 （Responsive Web Design , RWD ) 是 Web 设 

计人员 Ethan Marcotte 积极倡导的一组技术。采用这种方法设 ^ ^^ a Ost 

计的网站可以根据用户浏览器的环境调整布局，大多会利用二谷笑彳尺 VVP 栌之 I 
CSS 做•些精妙的处理。 ^ t >^) 


根据某些浏览器条件的当前值，如窗 U 大小、设备方向或长 
宽比等，我们可以在不同场合下应用不同的 CSS 。 通过重新考 
虑设置页面布局的方式，我们可以调整原先那种“以不变应 
万变”的行列网格布局，以适应各种不同的浏览器窗 U 大小, 
使之能更自然地呈现。 


响应式 Web 设计主要组成 


要让―个押銥赛孢抛筮 
应多种 > i © 玫安 ， RWD 
是恭简单、恭佚捷的方 
洗虼— 。 弟痄洚种轶; 
你隽纟可妒谀抨乏筘& 
经捵有 的—些 V ^ b 轶炜。 


要构建-个响应式网站，主要包恬三大 技术: 


O 


CSS 3 媒体査询《* 


戧 fH 町以榷匆其咎方衝在用不同的 
c ^ s 栊列.比如列％器竽 o 窀度 


计算当前浏览器环境的某些方面，来确定应用哪一个 


CSS . 


o 流式网格布局。 


o 


对页面布局元素使用相对 CSS 比例而不是绝对大小。 


流式图像和媒体。 



T 2 Wt > 的和 It 他布姿七鱟 < 乏用石 
分比.；不及嗲用嘩棄輩治恭定 


通过使用一些 CSS 技巧，使图像和媒体比例适应其 


容器的大小约束。 


!> 


浚式® 嚷和 碡1 -本含在》乂无*的笵®之 
内. 易的 其佔辟分轄比例臶故- 
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选择性 css 


不罔场含使用不罔的 css 


如果你做过一段时间的 Web 开发（而且熟悉 CSS ) ,则可能对 
CSS 媒体炎型已经并不陌生。我们以使规则有选 
择地应用 CSS。 

CSS 文件中的 CSS 媒体类喂声明如下 所示： 


@ media screen { /* CSS Rules for screens! */ ) 

4- 个沭类 4 C p -*： I 容的才 
在用 大超 • SCI *) 的规 p )- 


使用媒体类型有选择地应用 CSS 还有 -- 种方法 ,吋以在 
HTML 文档的 <link>* 设 K 。 


—嫌体粦型 
特写 

常用（而且有 用的） 媒体类堃包 
括 screen、print 和 all。 另外还有 
一些不太常用的媒体类型，比如 
aural、braille 和 tv。 

是不是有些好奇？如果你是那种热 
衷于读技术规范、喜欢满足好奇心 
的人，则可以看看 W3C 网站上 CSS2 
中定义的所有媒体类型，网址是 
www.w3.org/TR/CSS2/media.htinU 


clink rel=*'stylesheet" type= H text/css" href=’’print• css" media=”print" /> 


\ .<=； 冇馑一个打 《 设备 ( itHi - 8 ^( IUi ) l 
S 琛内 f 的 〆 在茂 lij 个外 if 样式表中的优沪九 


> n ^ - 基另4—种禕 1' 本 


像这样引用 prim 媒体类型是创建打印样式表的一种常用方法，打印 
样式表就是仅在打印内容时才应用的 CSS 样式。 


媒体类型，认识一些緙体特性 

你自 □•有 一呰特性，比如你的年龄，身髙等，媒体类型也样有自 
己的特性。非凡海象网站希望建立这样一个 规則： 要求不得向21岁 
以下的颐客供应烈酒，或者我们可能想定义一个 CSS, 只有当浏览 
器窗 n 宽度在某个范围内时才应用这个 css。 

很幸运！ CSS3 为所有常用媒体类型都定义了 width, color 和 
orientation 媒体特性。所以，再重申一次，媒体类型都有媒体特性。 

媒体特性本身用处并不大。我们需要以某种方式向浏览器询问我 
们关心的某些媒体特性的状态，并相应地做一些处理。这就引人了 
CSS3 媒体査询。 



a 及. 2有療 s 本他这 f 本荈作 「 不 a . 
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入门 


css 媒体查洵 

"screen 

as,if 5! 

@ madia screen and 


(min-width: 480px) 


義们鬌 V 十 sc - rCgiA .*' ^ t 本类蜇 
的 “ width " 本荈今 




时考含在用 ； i 普 cs ^ s 栊妁 


/* CSS Rules */ 


i 一个嫜(本蚩珣钥杀 琢态砍 
o 表孑我 fHSf 读一个 鼉.).瓮度 


毫乇轻 问. 2=一 
，个- wtflx - ■铊设 


这 表示： 当前是否在一个屏幕上呈现内容？而且当前窗口宽度是否 
至少为480像素？ 

确认？那好！应用这些 CSS 规则。 

再举一个 例子： 

@media print, screen and (monochroma) { } 


vi « ' 用 (i 考表矛.没吒. 
这碥农让人有螫遂珞 =• 


轚的_个錶 1 本麵3 芍以衿 TRMe 
^ FAL-SET 


在一个打印机上呈现吗？或者是在一个单色（黑 0) 屏幕上呈现 
吗？ 

确认？那就使用这些样式！ 



CSSJ 铹仿崔沩灸— 

子计算用户韌览粽中 
錄休特惟的当鋅值 
扣弟錄休崔沩彔达 
式计算为丁 RUE ：, 鉍 
令应抨斯包嚐的 CSS。 


解释 CSS 媒体 查询： 你可以自己试试！将下面的媒体査询与相应的含义连线。 


@ media all and (orientation : landscape) {} 


clink rel= f, stylesheet" type="text/css" 
href="my•css" media="screen and (color}" /> 


@media print and 

(monochrome) 



@media screen 

and (color) { 

> i 


对彩色屏幕应用这个外部样 
式表中的规则。 

对黑白打印机应用这些 样式。 


对彩色屏幕应用这些 
规则。 

对于所有媒体类型，如果是 
水平方向，则应用这些样式。 


你现在的位置> 
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有什么不同吗？ 


§0 Cnti 0 ij 


你能解释这些媒体査询吗？ 

你妥不4不彳楚 "« u " 碟 t 本聚•: a 抟如莓我们想 
/备希銪庐竑1本走螌的柘阕豸 f 本? jii . 魷古用 f .) “ fl ir 。 



Qmedia all and (orientation: landscape) {} | 

clinic rel= n stylesheet" type="text/css" 
href="my•css" media="screen and (color)" /> 

y 


@media print and (monochrome) t , _ 


@media screen and (color)~~{~~} k 


对彩色屏幕应用这个外部样式 
表中的规则。 

'对黑白打印机应用这些样式。 


对彩色屏幕应用这些 
^规则。 

'对于所有媒体类型，如果是 
水平方向，则应用这些样式。 



0 K 。 现在我了驊娣体金请3,薯至玎认 
»我68■的媒体金珣。不过鏤 T 采我 *« 
f + 么7 I 么为稃动设 ISCSS *? 


CSS : 多不罔才篝不罔？ 

我们已经有了 •个工具，可以对不同情况应用不同的 CSS 。 不 
过，现在该做什么呢？ 

别着急。我们确实要写一些对移动设备友好的 css , 不过不用 
一切从头开始。另外也不需要为移动设备分别编写完全不同的 
CSS , 我们可以分享已有的很多 CSS 。 

* 生成对移动设备友好的布局，我们要 做到： 

| | 检査 splendidwalrus.com 的当前布局，分析它的结构。 

□ 找出需要修改的布局部分，从而在移动浏览器上能有更好的表现。 
n 为找出的这些元素生成适应移动设备的 css 。 f ^ 

L - 1 我们彳含妁这螫4易光 

. _, 舞蝣笫;?•罔的 

□ 组织 CSS , 使用媒体査询选择性地应用移动和桌面 CSS 。 
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入门 



可以大致看看 chapterl 目录中非凡海象网站的 index . html 文件。发挥你 
的想象力，去掉具体的内容，可以看到一个基本 HTML 页面结构，如 
下 所示： 


<div id="visit” class="column">...</div> 
<div id=*'points 1 * class="column*'>...</div> 
<div id="main" class= ,, column">...</div> 
<div class="footer">...</div> 


你现在的位置 ► 
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现在来看 css 分析 


分析当前 CSS 

打开非凡海象网站的 styles.css 文 
件。 

这个文件最前 面有- 大堆 CSS ， 不 
过先不用担心这些。桌面和移动 
浏览器可以共亨相问的颜色、排 
版和样式。 

我们关心的是有关结构的 CSS , 它 
们在靠近文件最下面的位罝。 

备柃 (visit. ngVit^poLwts) 
i ； 兩 <5 丄 ¥ 的濾货 右 3 也 . 

的@洎（卯0^ 

桴内 i 穹耷2嫜的间蚝） 


專杖对 .级赶在一个 <1<1> 中， 
将它木平故 f. 4 讣 ® 个 <u = 
占历®穿度 6^1/3, 






备个 <U>^ 

的 l/S. lit 右 3 个 
钱 ii 


在枝和右枝分射妁之 40 
fit t . 4 金义的#幼- 


主枝利用达矩乘龙佟 . 
它不€:爭劫的 t 


/* Structure */ 
body, .header, .navigation, 
width: 960px; 


.header, 
clear : 


.navigation, 
both; 


.footer { 

.footer { 縈占 : • 壽蝥个主 ， i t 戋 


.column { 

margin : lOpx lOpx 0 0; 

} 

.navigation { 

min-height : 25px; 

} 

.navigation ul li { 

width: 320px; /* 960/3 */ 

} 

.header { 

background : url(images/w.png) 
height : 200px; 

} 

tvisit { 

width: 240px; 
float : left; 

} 

tpoints { 

width: 240px; 
float: right; 

} 

#main { 

margin : lOpx 260px 0 250px; 
width : 460px; 


©巧 Ci 咎; t # 占洚？鰲 个生冰 
宽 4. 錡以_宠糞砝係它们耷 
送沒耷《油元棄 

cUaHooth 的 (1. 用秕 基麯侈 
漁螫无最从由的•一行”丹 
诒. 也鱿泉说, 棄这 沒有苒 
姑走#„ 


no-repeat; 

毋第耷一个好 f ® 緣译以來 
龙名以 ft 宅全5 
•子 < i 个®嗱 


昜起来主枵宽度左 技甚 
^ 20 ( t ^ 摩縈滅去分 

則 ) b ^ o (^ #宽的在枵扣 
右枵） e 不过.考恚利备 
秸 C ： 间的并个!• 〆 象舞的用 

fk . intn . 

&今旮 o、. 


'在2泪象棄 右 it 货$ ^ 4 il M < 

沾 2秕雄 t 了它在东 c 
中的亡 I 
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入门 


# 些熏要 改交? 


0让页面和页面结构元素能放在320像素 以内。 

正像 Frank 在第9页提到的，320像素是一个常用的移 
动设备屏幕分 辨率。 

o 将三栏减为单栏。 

原来桌面布局中的三栏在移动设备屏幕上看起来“很 
挤” • 



我们可不希望重写所有 css 。 

只需要调整其中一些结构布 
局元素。其余的（包括排版 、 i 
颜色和诸如此类的 内容） 基 


本上都可以保持不变。 


对子移动设备，我们 t 要拕迖个布爲 



的一个三桴痄晏 



你现在的位》 ► 
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移动 css 调整 


找出需要修改的 css 

要为我们的移动版本调整以下突出 
显示的代码。 




移功版 本中 不 fi d 个柅則 
不过 ii 也不么 朽响） 


由4在 移分年务 中沒 料功 
的大舞，的以不 


Ci 亥坛 ir 沒蚵么 问拯.戧们*望 
导 杈铯趄 f •少充这个專度， 

噱 S i ® 蝥考鉍估缒的 tft ^/ 
以 (i 在曼 •) •的 廣華。 


聿袞刪狳这哆 ft ⑽ ttif . 
4 4 visit ^srpoit^ts ^2 ffi 

tHu 


/* Structure */ 
body, .header, .navigation, .footer 
^ width: 960px; 

} 

.header, .navigation, .footer { 
clear : both; 


♦. c ^ Uovu ^ •’ 含邊 故 2 . 


.column { 

margin: lOpx lOpx 0 0; 

} 

.navigation { 

min-height : 25px; 




刚.去 ㈣ ㈣ 出 


.navigation ul li { 

^ width: 320px; /* 960/3 V 




.header { 〆 

background : ur 1 (images/w.png) no-repeat; 
height : 200px; 


#visit { 

width: 240px; 
float: left; 

} 

#points { 

width: 240px; 
float: right; 


#main { 

margin: lOpx 260px 0 250px; 
width: 460px; 


m 不过贫场丄*4不需龙. © 
蜉我 fn 含馑用 样的©嘩， 


不為 ti 送矩來定治 
含占潢鰲个窀度） . 不过靠 I 
被嚢宠4。 
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styles.css 



釗建移动 css 的步骒 


入门 


O 修改突出显示的 css 规则的宽度。 

O 删除我们不需要的 CSS 规则。 

O 抽取出公共 CSS 规则。^^ 

移动 cssm 抑 

使用磁鲇建立移动 CSS , 





[^dtt^320px^ ^ J 


你现在的位置 ► 
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4 个规则中的移动 CSS 



移动 CSS 糍贴著寡 



完工？ f 移动 CSS 

大功告成！这4个 CSS 规则正是我们需要的移动布局。 
现在需要确保移动设备使用这些规则。 


怎么做到呢？我们的老朋友媒体査询可以帮忙！稍后 


我们会生成一个媒体査询，将这个 CSS 应用到浏览器 


窗 U 小于等干480像素的设备。 


多浚行的笮裢寻机的*■长 
(8 P •木年方知〉的 
分譌摩 
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它们并没有消失 

•…只是不再需要把它们包含在我们的移动 CSS 中。 
为什么呢？因为对于这两个布局（桌面布局和移动布 
局），这些 CSS 是一样的。 


我们将把这些公共的 CSS 放在媒体査询之外，这样就 
不必在两个不同的地方放罝相同的 CSS 规則。现在就 
来做这个 T . 作。 






入门 


其他銥构 css 

兴孳的结构 css 


看到 了吧？ 我说的没错吧！实际上 CSS 根 
本没有消失。这里就是我们在18页上看到 
的结构 CSS , 只是被抽出来了。 


桌 ® 结构 CSS 

还需要为桌面浏览器逮立漂亮的 css ! 

去掉那些公共的结构 css 规则之后，这里可以 
看到专门针对桌面浏览器的 css 结构。- 


我们要使用一个媒体査询，使得只有宽度在 
481像素以上的视窗才适用这个 CSS 。 


7— 步傲什么？ 

为了创建同时适用桌面和移动浏览器的结 
构 CSS ， 下面来看为此建立的仟务 列表： 

[ v 7 ! 检査 splendidwalms.com 的当前布局，分析 
它的结构。 

[7] 找出需要修改的布局部分，从而在移动浏 
览器上能有更好的表现。 

[7 J 为找出的这些元素生成适应移动设备的 css 。 

□ 组织 css ， 使用媒体査询选择性地应 
用移动和桌面 css 9 


•header, .footer, .navigation { 
clear: both; 

} 

.header { 

background:url(images/w.png) no-repeat; 
height : 200px; 

) 

.navigation { 

min-height : 25px; 

) 


body, .header, .footer, .navigation 
width: 960px; 

} 

.column { 

margin : lOpx lOpx 0 0; 

.navigation ul li { 

width: 320px; /* 960/3 */ 

} 

#visit { 

width: 240px; 
float : left; 

} 

#points { 

width: 24Opx; 
float: right; 

} 

#main { 

margin: lOpx 260px 0 25Opx; 

) 


你现在的位置 ► 
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<head> 

<meta http-equiv= w Content-Type w content*"text/html; charset=utf 

<meta name= "viewport" contents"width»d®vice-width, initial-scal< 

<title>The Splendid Walrus : Public House and Spirits</title> 


styles.css 


styles.css 


我们通过以下方式集成这个更新版本的 styles . css 。 


吋 漁砟分 css 戏 fo 


最后一点 


index . html 文件中需要一个视窗 < me ta > 标记。这些标记可以告诉浏览器如何“放大 
缩小”来呈现内容。后面我们谈到这些标记，不过现在只要记住 一点： 肯定会需 
要下面这个标记。 


集成在一起 


_ 

chapterl 


_ _ _ 

images 

-□ 


point.png 


sample.jpg 


a 

index.html 


index.html 
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入门 


Q 编辑 index.html 文件 0 

加入第22页的 < meta ># E B 

打开 styles.css 文件。 

要替换文件末尾附 i 的结构 CSS 规则，删除结构元素的现有规 
则。 

0增加公共规则。 

增加第 21 页上的共享结构 CSS 规则 a 


伞动手做! 1 ■» 

伞 


O 增加面向桌面和移动浏览器的 css 。 

增加桌面规则（第21页）和移动规则（第20页>。 


一试一 1 试 


把面向桌面和移动浏览器的 CSS 放在媒体査询中。 

增加媒体查询（第22页）。 



旦完成上述修改，就在你的桌面浏览器中加载 index.html 
文件，调整窗口大小，使宽度小于481像素，可以看到适用 
移动设备的布局。 




你现在的位置 ► 
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明确的比例 






Frank ： 真让人头疼。我还以为我们创建的移动 CSS 能解决这个问题呢。 

Jill ： 你的 CSS 能建立适用于较小屏幕的布局，不过还是太严格。我的意思是说， 
如果我把 iPhone 水平放置，那么看看会发生什么。 

Frank ： 哎呀，布局宽度还是320像素……不过这可是480像素宽的屏幕呀。难 
道说对每一种可能的视窗大小我都得编写不同的 CSS 吗？ 

Jill : 哈，这里响应式 Web 设计就有用武之地 r - 目前，你为当前窗 U 宽度在 
480像桌以下的所有浏览器提供了一个大小严格限定的结构，而不论这个特定 
浏览器窗 U 的具体宽度是多少。这样很不灵活，我是说，并不是所有移动设备 
都有320像素宽的浏览器窗口。 


响应式设计可以帮助我们根据不同的情况调整布局。并不是限定元素的绝对大 
小。也就是说，魷像现在这样在结构 CSS 中使用 基丁像 素的度 ft 方式指定大小 
吗，完全可以使用一个比例布局，这样可以更好地适应不同的用户。 


Frank ： 比例？是+是就像 CSS 中的 em 和百分比之类的东西？ 


Jill : 对，差不多吧。建立布局时我们可以使用百分比而+是像素。这样一来， 
内容就可以伸展和收缩来填充可用的空间一有些像灌进空隙里的水。正因如此， 


这种布局通常被称为流式布局 (fluid layout) ,另外，顺便说一句，这也能帮 


ii 个掙 茫度夂子 ^20 fi # 

⑽ 那倒不是！媒体査询可是实现响应式设计的重头戏。 

uIuj IrcJi Umofi Orop< nude «iU» or^uiK B 


助我们调整那个“出格”的图像。 

Frank ： 这么说，我们用媒体査询做的所有工作都是白费工夫了。 



采用响应式设计，可以在更多设备 
和浏览器上提供让人感觉更舒服的 
应用。黌转向 ft 应式设计，下一步 
是把之«基于像橐的固定布局转换 
为一种成 I gj 的流式网格 布局。 


youTuberZif ii 个 t • 対⑽从上 2 H 

不抟禧放 
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入门 


Fireside Chats 

華零 


今晚 话题： 当固定网格布局遇到流式网格布局 


流式网格 布局： 固定网格 布局： 

嘿，固定网格布局。我知道你很有阅历，可谓见多 
识广。不过，绝无冒犯之意，你的处世哲学确实还 
有些问题。 

什么问题？像你这样初出茅庐的小子也懂哲学？ 


我是说……你有点老气。你总是严格定义尺寸大 
小，这让你看起来很脆弱，也很不灵活。也就& 
说，你不是响应式的。 


你不能对用户环境中的改变做出响应。你总是老 
样子。 


你的用户可就倒霉了。对于不同的浏览器窗口大 
小，看看你的表现吧，不是少了内容，就是留出大 
块空白。 


在你那个时代这也许是个办法，不过现如今浏览 
器和设备种类实在太多了。如果你愿意放弃这种 
严格限定像素的布局（嘿，毕竟它们是古老的印 
刷年代流传下来 的）， 而让你的内容像水一样流人 
浏览器窗口中的可用空间，你就能适用各种各样不 
同的情况。 


响应式? 


传统有什么错？我就是要提供设计者期望的效 
果！ 960像矣•宽，另外左右栏宽度分别240像素。 


如果用户不满意，他们应该自行改正，调 
整一下，改用一个标准的浏览器才对。 


好吧，小家伙， It 我看看你能做什么。 


你现在的位置 ► 
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噢，像素限定世界 


©定 室袞布爲到底有什么问翅? 


如果这个世界的浏览器窗口都一样大，这将是一个安全、 
美丽的世界，设计者们完全可以通过限定像素控制网站的 
外观 。 

遗憾的是， Web 从来没有这么容易控制。有时我们想要根据 
一些“标准的”窗口宽度（比如640、％0或1024像素）来设 
计，不过大多数情况下这都只是一个 幻想： 根本没有标准 
的浏览器窗 n 大小。这还只是桌面浏览器的情况，要是考 
虑移动设备，情况就更复杂了。 

当然， 非凡海 象网站的固定布局在960像素宽的窗 U 中看起 
来还是不错的。 

迖个布爲不能适应其他窗 D 犬小 

不过在一个较窄的窗口中，看看会发生什么。栏宽还是一样， 
这说明有些内容会被切掉，用户不得不水平滚动屏幕。真槽 
糕。 

§ 宽的穿— 
c 中罨 f ‘) 的阉玷。 


棄竽 c 中 S 矛 

^ 的两站。 





在较宽的窗 n 中，整个布局仍然只有960像素宽，这就会浪 
费屏幕右侧的大块空白区域。嗯，真不怎么样。 



奋1200体靡宪的穿 c ? 中着 fO 
杓网站 - 


f 个宽度哦剌0 祝) 涔舞 
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为什么流式 R 梏布爲 E 好? 


流式网格布局使用比例单位（百分数）而不是像素 


来表示宽度。我们仍然能提供设计者预想的效果，让 
左右栏分别占页面的1/4,只需要定义它们的宽度为 
25%,而不是240像素。 


t 的东 c * 中赍寿 

涑式网格4易 0 前罨 起床、~一"^ 
沒耷0彡不同. 4不4 •， 



随著窗口改变犬小，布爲会相应调螫 

对干不同的窗 U 宽度，内容会像水一样流入，填充布局中的 
可用空间。左栏和右栏总是占据窗口的25%,在较窄的窗口 
中不会剪裁内容，在较宽的窗口中也不会有空白区域。 



蒋 t : 占穿 ot 度 

的25^, 


o 中奢考龙式用 
格布易。 


tax>o<^ 嫌 t 的 

笫 o 中金昜浼式 







我们要把桌面和移动 css 从固定网格布局 
转换为流式网格布局。想想看这对于解 
决川 I 在移动浏览器上查看网站时发现的 
问题 有嗶些 帮助？ 
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随大流 


960像 J 


960*1, 


洋细分析 

T 面借用非凡海象网立 

首先来看作为比例计' 
设计为960像素宽 。I 
计比例相同。所以要1 

导航，页眉和页脚都彳 
应用流公式计算！ 


含无景的 
走 •>. 用体 




要把•个基于像素的 
«r 以使用以下 公式： 


要解决川1发现的问题，转向响应式设计，还需要做很多 c 作。 


使用比例宽度而不是固定宽度，将基干像素的布局转换 
为流式网格布局。 

设罝默认字体大小为100%,这样页面的字体就能按比例 


缩放。 

修正无法播放的 YouTube 视颊。 


扣蓽 S 澧 i 戈甙用 格夸晏 
妒宏 4蝥玄 1 本也甚旻4的- 


修正过宽的图像。 


布 局转换 为按比例的流式网格布局， 


无砉的 <•) •.期 一 
体 # t(Otic 

"■t 下 i •的 
舞輩沄 〆 


目标 


结果 


，上下文 


扣的 ft 例 css 坭时 
(一个石分數> . 


占的桌面布局来分析这是什么意思0 

释基础的上下文。在这里，我们的参考 
fe 们希望得到的流式网格布局与当前设 
枝据这个960像素基准来计算。 

廣跨整个页面宽度，因此可以很容易地 


R _ 

墜 


100 % 


L 


1 



体 f 

1 

A 

u 


. 9如(象黉 


□ □ □ □ 
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继续流式转换 

相对于包含上下文的960像桌，左栏和右栏宽度都为240像紊。要得到比 
例度最，可以再次使用流 公式： 

24 o «« 

_ _ - 25% ^~ 不爰唣： 

960 像索 


中间的主栏稍有不同。它不是浮动的。相反，要利用页边距为元素定 
位。不过这也没关系。我们仍然可以使用流公式将基于像素的页边距大 
小转换为百 分数： 


250像索 



960像橐 


thereiwre no 

Dumb Questions 

P 5 ) I 这些数里为什么有这么多小数位？需要 
这么多位吗？ 

这里我们主要为了展示炖正的流式网格 
布局方法，完全桉计算器得到的数来建立 CSS 
单位， 

实际上，浏 I 器会对这些过长的数四舍五入. 
另外，要特别注意，不同的浏見器四舍五入的 
方式还稍有不同。 


更新后的 CSS 规則 




将 styles.css 中有关结构的桌面 CSS 规则转换为比 
例宽度。可能需要编辑面向窗口宽度 481 像素以 
上的媒体查询中的 6 个 CSS 规则。 


所以，这要看你的了 # 可以考虑把这痊数四舍 
五入为小敫点后有一位或两位。另一种方法是 
在布局中保留这些数，一两个百分数根本不会 
有太大影咕，布局不会太精确，不过，要避兔 
四舍五入问題的一些陷阱，另卟计算不要太严 
格。 

1^) :等一下。为什么 main 的上边距还是10 

像素？是不 ft 弄错了？ 

垂直布局与水平布局完全是两码事。我 
们不能使用960像索上下文，因为设计的高度 
通常不会是一个已知量，使用百分数的垂直 
布局会很麻煩，不同的浏見器中会采用不同的 
(有时甚至是拙劣的）方式支持。对于垂直边 
茈，涞这样使用诹素是完全可以的。 
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Mike 提供了一个新的每月特品，他希望在非凡海象网站上发 
布出来。不过不要像现在这样在主栏中通过文本和一个图像 
来表现，他想浮动显示两款非常特殊的限量版啤酒的标签， 
让它们彼此相邻。在基于像素的参考设计中，看上去是这样 
的： 




你是不是认为将这些图像宽度转换为流式宽度的公式应该是 
这样： 


220像橐 
960** 


二22.916667% 


你觉得这个公式对吗？ 
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注意你的上下文 


迖个樹 ft 怎么？？ 

上下文已经改变了！ 

如果把图像宽度设1为22.9166667%，它们会占据22.916667%, 
不过是其包含元素的22.916667%。 

这些图像的包含元素不再是主体（宽度100%，或参考设计中的 
960像素），现在的包含元素是 div # main , 它的宽度大约是460像 
索（按比例来讲就是960像素的47.91667%)。所以刚才我们指定 
的图像宽度只是460像素的23%还略少一点，这太小了！ 




我们不这样做，而是将公式中的上下文设置为包含 
元素的参考宽度，在这里就是460像素。 


把图像宽度设 S 为百分数？仔细想想 
看，这正是修正移动布局另外一个问题 


宽度的不多 





的解决之道。还记得吧？有一个照片太 
大了，超出了页面宽度。我们可以把这 
里的做法稍做调整来解决这个问题！ 


32 第1章 




入门 


流式橙像 - 和遇体! 

别看这个 CSS 很简短，能量可 不小： 



只是做 r 这样一点小小的补充，就能避免图像或嵌人的媒体 
对象超出其包含元素。因为它们限制为100%宽度，也就是其 
包含元素宽度的100%，图像和媒体会听从其父元素的安排， 
不会试图超出边界。太榨 f ! 


荠式辑僬和錤休 
僬漭式闪柃布扃 

内按比倒缔敢。 


恶伤 的告別…… 

大多数情况下，不做出点牺牲就不会有 收获。 要想在 
图像和媒体上使用流技术，我们必须放弃我们的老朋 
友: width 和 height ® 性。 

上面的 CSS 规则会覆盖 width 厲性，不过不会影响 height 属 
性。这说明，如果我们使用了 height 属性和 width 属性，敁 
后就会得到一个宽度缩放而高度不变的图像。最终结果 
是一个怪异的挤压变形的图像（长宽比有 误）。 

没错，对干这个问题也有另外一些解决方法，刪除这些 
属性并不是上策。不过我们现在打算先放弃 height 属性和 
width 属性。 



流式图像不 ft —种“万全 
的”技术。 

可以在较窄的屏幕上压缩一 
个图像，不过这并不意味着 
从其本质来讲它有什么变化。 
一个 800 KBJPEG 的图像仍是 800 KBJPEG , BP 
使把它压缩到一个120像素宽的栏中，它仍 
是那么大。 


在第2章中，我们将讨论为不同设备和浏览 
器传送不同图像的技术，以节省本来可能 
会浪费的带宽和处理器能力（需要处理器 
完成具体的缩放）。 


不管怎样，这仍然是一个强大的技术，绝 
对值得你收入囊中。 


你现在的位置 ► 33 








流式移动 css 


成功了蚂？ 

我们在钥着适应更多设备的响应式设计 前进。 不过 ， 还有一些问题 
需要 解决： 

一 2礞龙鞾滅蛘^ (C 聃 

Q 使用比例宽度而不是固定宽度，将基于像素的布局转换 〔’ ri 〜 ' ’ 

为流式网格布局。 

[― ] 设置默认宇体大小为100%,这样页面的字体躭能按比例 
缩放 t 

Q 修正无法播放的 YouTube 视频。 

修正过宽的图像。 〜似 * 

教利的, 

转换移动 C 站 

还有一些移动 CSS 规則需要转换为流式规则。 



@media screen and (max-width: 
body, .header, .footer, .nav 
{ 

width: 320px; 

} 

.column { 

margin: lem 0; 
border-bottom: lpx dashed # 

} 

•navigation ul li { 
width: 106.6667px; 

) 

#visit r #points, #main { 
width: 320px; 



@media screen and (max-width: 480px) { 
body, .header, .footer, .navigation { 
width : 100%; 

} 

.column { 

margin : lem 0; 

border-bottom : lpx dashed #7b96bc; 


.navigation ul li { 
width: 33.333333%; 

) 

♦visit, #points, #main 
width: 100%; 

) 


規則耷本 ® cuss 规列艽 會和阑 
(•圯 薷 30 两）> 也荇9以龙它们 
放杏公共送构 C < sst . 不不暑 
分判 祷奋* 个不同的岵方 


当前（固定） 


更新后（流式） 
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细节，细节 

要 it 更新版本的非凡海象网站充分实现响应式设 it *， 下面 
来考虑剩下的几个细节问题。 

建夂灵话的字体 

到目前为止，我们的布 W 已经可以适应性调整，不过字体 
还是很古板，很固定。就像阴阳对应一样，百分数是流式 
宽度（作为“阴”），对应像紊固定宽度（作为“阳 ”）， 
em 是按比例指定字体大小的单位。 Mike 在原来的 CSS 中已 
经使用了 em , 所以我们只需要向 < body >7 e 素增加以下规则 
来保证彻底 全面： 

body { 

background: #f9f3e9; 
color : #594846; 

font: 100% "Adobe Caslon Pro", 

"Georgia", "Times New P.oman n , serif; 


字体大小特写 

通过对 < body > 元素 CSS 规则的编辑，我们将 
页面的基准字体大小设置为100%。不过100% 
到底是什么意思？下面给出一个简便（只是 
近似）的经 验式： 

lem = 100% * 12pt « 16px 

不过要 a 住我们的目标是让内容适应用户 
的环境。如果用户改变了浏览器的字体大 
小，100%就会表示为一个完全不同的绝对大 
小* 

另外要记住，移动设备上的字体很复杂，有 
些情况下， lem 可能等于一个（明 显） 不同的 
点或像素大小。 


这个基准字体大小重罝就像是画龙点睛，它建立了一个明确 
的参考， CSS 中的其他字体大小都依此来定义。这不算是刻 
不容缓的大问题，只是为了保证整齐！ 


修 iE YouTube 视頻 


很多移动设备不支持 Adobe Flash 0 嵌入式 YouTube 的标记已经 
过时 f , YouTube 现在提供了一个基于 iframe 的嵌入代码，在 
iPhone (和其他现代设备）上也能很好地工作。我们需要编辑 
index . html 文件，替换当前的嵌入代码。 


用这个（只® 侖 fuisM 

YouTube 的新嵌人代码会根据浏览器确定所使 


〈object width="230 w height="179" 
type=”application/x-shockwave-flash" 
data="http://www.youtube.com/v/0- 
jOEAuf DQ4?fs=l&amp;hl=en_US4amp; rel=0 ,, xembed 
src*... /></object> 






t 用个代鉍 


<iframe src»"http : //www.youtube.com/embed/0- 
jOEAufDQ4" style= M max-width:100% w ></iframe> 


用的适当的视频格式。它可以为支持的设备 
(如 Miki 的 iPhone ) 提供 HTML 5 视颊而不是 
Flash 0 只需要从视颊页面中的 “ embed ” 段 
抽取出这个更新的代码段。 
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展示你的能力 


记住你的贵任 

流式图像的大小调整实际上不会减少图像的文件大小，类似地，浼 
式媒体也不会改变实际媒体的大小。要由你来决定，相对于文件大 
小和播放视颊所需的处理器能力，在移动设备上使用视颊（或其他 
多 媒体） 是否值得。 


好了！下面完成所有这些修改，使用响应式 Web 设计技术，让非凡海象网站 成为一 个对移 
f 胃' 动设备友好的网站. 

編輯 styles.css 文件 

O 编辑低分辨率设备媒体査询中的 CSS 规則。把这些固定宽度转换为 

比例宽度（第34页）， 

O 由于面向移动设备和桌面浏览器的 CSS 规则按比例度 fi, 找出二者 

公共的结构 CSS 规则（第34 页）， 将这些规則从媒体査询特定的 
段中删除，把它们放在 CSS 文件的公共结构段中。 

O 增加第33页上的 CSS, 实现流 式图像 （和媒体）。 

O 更新 <body>&CSS 规則，增加一个比例宇体大小基准（第35 页）。 

编輯 index.html 文件 

0 用第35页上更漂亮的 iframe 版本替换只适用 Flash 的嵌人 YouTube. 

技 f i«f 闲穿 OH 

前进吒 f ( 跑#由«如何 it 在 ii 苷 

Q 保存所做的修改，在任何 Web 浏览器中加栽 index.html 页面， 
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i ®) .' ok . 我己经在 CSS 见过 em 作 
为单位，不过还不太理解。到底什么 
意思？ 

^ .*〗 em 就是刍前上下文中当前字 
体大小的一种表示（这可能不会让人 
留下太深的印象）。听上去没 什么意 
思。不过，相对于它定义你的字体大 
小时，魔力就会显现出来，所以，如 
果设置 < hl > 元素按 1.5 em 显示，这将是 
其包含元素的基准字体大小的150%。 

实际上可以使用同样的流公式由固定 
的字体大小生成基于 em 的流式字体 
大小。在一个蟇准字体为16点的上下 
文中，要创建一个18点字体的流式版 
本，可以这样 计算： 18/16 = U 25 em 
(目标/上下文=结 果)。 

05): 等一等。为什么是 1.125 em 而不 
是112.5%? 

主要是一直以来都是如此，也是 
为了更清楚，不过 em 在跨平台方面确 
实做得更好。常用的 Web 实战是按百 
分数定义块元素宽度，而用 em 定义字 
体大小 B 除了极少的几个例外，对于 
字体大小来说，百分数和 em 可以互换„ 
对于那些 例外： 我们将 < body > 元素的 
字体大小 （ font - size ) 设置为100%来 
泌盖这痊例外情况 9 


tfierejore no 

Dumb QuestiQ 


ns 


If ) r 除了移动 Web ， CSS 媒体查询 
还有没有其他用途？ 


¥•当然有.举个例子：移动设备通 
常代表屏幕分辨率的最低端，一些更 
新的寛屏监视器和电话則有很高的分 
辫率。有时有必要为这呰窗口宽度调 
整布局（比如说增加更多 栏）， 


r ^) i 到底是什么导致第 7 页上练习中 
屏幕右边出现奇怪的空隙？ 

¥ :这是 iPhone 特定的问題„显示 
一个“放大”的 Web 页面时（也就是 
说，让它相当于一个桌面浏览器）， 
iPhone 上的移动 Safari 会假设视窗宽度 
为980像素。在针对移动设备进行优化 
之前，非凡海象网站布局宽度是960诹 
素，这就会在右边留出一个难看的20 
诹素宽的空眯。 

问： “CSS3 媒体查询”中的 “3” 
是什么意思？ 

¥: CSS 有很多个版本。你可能以 
为有3个版本，不过情况要更复杂一 
些。 CSS 2 在1998年作为一个“推存版 
本”发布，这是大多数 Web 开发人员长 
期以来熟惠的版本。媒体类型就是在 
CSS 2 ?I 入的. 


CSS 3 与 CSS 的早期版本完全是两码事， 
因为它是糢块化的，大约有40个不同 
的樸块，而不是一个庞大的复杂的规 
屯。 幸运的是，媒体查询樓块是比较 
完整和穗定的糢块之一。 


1^) :既然 CSS 3 还没有最终“完成”， 
浏览器提供支持吗？ 

¥:就像之前说的，现在我们面对的 
还是一片蛮芄。人们已经越来越广泛 
地接受了 CSS 3 的一些比较完整的部分， 
不过，稍后会看到，这与我们憧谏的 
移动世界还相距甚远。 

I 15 ) 为什么移动布局中右栏在主栏前 
面出现？ 

在 HTML 标记中， div#points 内容 
出现在 div#main 内容前面。 i 桌面布局 
中，使用了 floats 来对# points 内容定位， 
让它出现在#013丨11内容的右边。移动布 
局没有使用 floats, 因此，这些内容会 
按 HTML 中出现的順序显示. 

I ®):你略过了媒体类型 m@import 
语法》能对媒体査询使用 @ import 语 
法吗？ 

:没有多少人喜欢 @import 语法 • 
所以，我们谈得很少，实际上，我们 
甚至没有提到它。不过，你说的没错， 
对于根据媒体类型包含样式表和对于 
媒体查均来说，这种语法是完全可用 
的。 
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练习答案 



^ 1 爷劣 籌怵 . vif 
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看看有哪些 改变。 


kground: #f9f3e9; 
or: #594846; 

t: 100% "Adobe Caslon Pro", Georgi 
rimes New Roman", serif; 


…… 共阌的对魬 . 艏绝 . 

( 共用的 O 铛构 css). 


•header, .footer { 
clear: both; 

) 

.header { 

background:url(images/w.png) no- 
repeat; 

height: 200px; 


.navigation { 

min-height: 25px; 

) 

img, object { 

max-width: 100%; 

} 

•navigation ul li { 
width: 33.333%; 

) 

.header, .footer, .navigation 
width: 100%; 








这里是针对不同分辨率的结构 css 。 


否侖 较丈刑 ％器茁 C 的铉 
(釦本否洌铉器） # 


皎今刦笔器穿 0 的终构 
c*ss (倒如.移功 tH ) 。 
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海象的响应真是非凡 


得到一个响应式网站 


AKwrU» 


Splendid Wauujs: Public House Sc Spirits 


The Splcadtd W«ku« pub U 
tbf pW-c kn dtfwntowfi 


在 个 At^droid Nexus s ^ 

Hi：. 沒 /4A.) • 咧婷 含湲 . 
相功号•戈式 W (象技木 


•- 

-- 

个不同的難奸 时术 使用- 
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响应式设计也是一种鞲祌状态 


入门 



BUUIT POINTS 

■ 移动 Web 与早先的西部蛮荒地区并没有不同，同样 
是充满了惊奇和冒险。移动 Web 浏览器世界包容万 
象，多姿多彩，有时甚至荒诞不经。 

■ 我们可以在移动设备上像在一个“传统”浏览器上 
—样使用同样的布局.不过这并不意味着必须这么 
做. 

■ 响应式 Web 设计 （Responsive Web Design , RWD ) 
是一组方法，可以使我们的 Web 内容适应用户，而 
不是反过来（强制用户查看严格格式化的页面）， 

■ RWD 是 CSS 3 媒体査询、流式网格布局和流式图像 
共同构成的一个 组合。 这也是考虑布局和内 容的一 
种方法。 

■ CSS 3 媒体查询允许我们选择性地根据相关媒体特 
性的当前值对不同的用户环境应用 CSS 。 

■ 媒体类型[例如， screen 《屏 幕）， prim (打印设 


备 ）、 projection (投影）]都有媒体特性 ( width , 
color 、 monochrome 、 orientation ) s 我们的媒体査 
询中就会计算这些媒体特性。 

■ CSS 媒体查询是一个逻辑表达式 • 计算为 TRUE 
时，就会应用所包围的 CSS 规则。 

■ 流式网格布局是指使用比例宽度而不是固定宽度， 
使得页面的内容可以缩放，自然地流入页面布局， 
适应各种不同的窗口宽度。 

■ 流式图像是一种 CSS 技术，保证当父元素宽度小于 
图像（或媒体）的宽度时，这个过大的图像（或媒 
体）不会“超出”其父元索宽度。图像和媒体会随 
父元素的收缩而收缩。 

_ 在< 1 ) 0 € 1 >>元素上使用一个简单的 font - size 重置，按 

em 或百分数定义字体大小，可以保证字体是流式 
的。 
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2 真正的 喰应性 


命 



^移动优先响应式 Web 设计 


系爱的.我不兵心你冷不冷。 累是 你知熳 
达样布多鹨， 即值是冬 天你责定也恿逢穿 
iitt 綦尼在沙滩上留彩。 




这是一个漂亮的移动网站。不过漂亮只是表面。在内部，它根本不是 

那样。它可能看上去像是一个移动网站，不过仍然是一个披着移动外衣的桌 
面网站。如果我们希望这个网站成为移动世界里一道炫目的闪电，就要先从 
移动开始。皆先分解当前的网站，找出隐藏在移动外衣下的桌面成分。我 
们会做个大扫除，从头开始改头换面，从构建基本内容直到建立一个桌面视 
图。完成后，你会得到一个不论屏幕大小都可以优化的页面。 
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不那么非凡的海象 


你认为泫疢抚胜利？ 


Mike 陷人恐慌。作为一个前 Web 开发人员，他总想对他的网 
站做些修补，但一直在克制这种冲动，不过他终于按捺不住, 
决定稍稍做些 修改。 他觉得好像破坏了非凡海象网站，现在 
还需帮助。 

Mike 为 On Tap Now 页面上的所有新品增加 f 图片。除了增加 
图片外他没有修改任何代码，但是现在移动手机上页面加载 
得非常慢。实在是太慢了，已经有顾客开始投诉了。 
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真正的响应性 



㈣ 《， 


轧 M « f ‘) ii -#.. 我们 寒花.者.时间的论忖. 
钵不用 4 S 心. 垠杖妖含 < it , ) 移妫 说光的 0 * 
6 kweb ； a »4 . «<4 A . 现<5戊的瓣荀这普 

.im ^ M -9 fiX ie. 1? ^ 6f) 


达篝问越蚂？我们怎么知通？ 

Jim ： 可怜的 Mike 。 会水的才会淹死，他知道得太多了， 
所以才会遇上麻烦 a 

Frank ： 说得是。不过对干现在的情况我不太清楚他哪 
里做错了。移动手机的 W 络连接和处理器速度本来就慢 
-些，页面加栽比较慢也是理所当然的啊。 

Jim ； 有道理，不过看起来还是比预期慢太多了 。 Mike 
说即使有 WiFi ， 加载速度也无法忍受。而 R 要知道他有 
一部非常高级的新款哲能手机。 

Joe : 嗯……听上去我们至少应该看看有没有什么问题 
明显导致速度减慢。 

Frank ： 我们怎么知道发生了什么呢？可能是网络问题， 
也可能是手机和服务器之间的很多其他环节出了问题。 

Joe ： 我一直在用一个面向 Firefox 的插件，可以对页面 
性能评分。我们可以用类似这样的工爲来检査。 

Jim ： 听起来不错啊。 

Frank ： 可以在移动浏览器上安装插件吗？ 

Joe : 喚，你说到点子 h 了。我的手机上根本没办法安 
装插件。我喜欢的•些开发工具都是浏览器插件。没有 
这些工具，我们怎么能知道到底发生了什么呢？ 

Jim ： 前几天 Kim 向我展示了如何通过网络路由器的日 
志页面来监视对 WiFiN 络所做的每一个请求。我们能不 
能利用类似这样的方法，来监视手机做了些什么？ 

Frank ： 这个想法太妙了。不过，我们可以使用一个代 
理服务器。这与 Kim 向你展示的很类似， 而巨代 理服务 
器正是为这种用途而设计。如果把手机关联到一个代理 
服务器，就能看到〒•机的所有 Web 请求。 
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等一下，请用代理 


服务员，玎认点 菜蚂? 



一个著名运动员在与对手的一场重要比赛前一晚因食物中毒 
住院了。聱方怀疑是故意伤害，请-位侦探査清此事。侦探 
迅速行动，开始询问最佳0 击者： 服务员。 

服务员拿着点菜单，写下顿客点的菜，把它交给大厨。 
菜做好后，服务员把菜端出来。一切她都看在眼里。 

大多数情况下，在 Web 上你都像是在与大厨直接交谈。你 
与要访问的页面所在 Web 服务器之间什么联系也没有。 


不过，如果有一个类似服务员的代理服务器，它会记录你要 
了什么，浏览器提供了些什么。现在我们可以做自己的侦探， 
找出亊情真相。 



移动手机 



代理服务器 


Internet 


不 11 一个鲜則的裉务器 m ’ 
含 ( i 栌欽件.饬的个人釾货机犹巧以忾 
妁代 理.味务》 


我能找到一个代理采建 i 我的代理蚂？ 

如果你做过很多移动方面的工作，就会发现学习如何建立一个 
代理服务器很有用。这是了解手机和服务器间发生了什么的最 
佳途径。 

遗憾的是，建立代理服务器可能相当困难。好在 ， Blaze (一家 
移动性能 公司） 的一些好心人已经建立了一个免费的服务，除 
了安装你自己的工具外，这可能是最好的办法了。 


tell 


Web 服务器 
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真正的响应性 




Blaze 提供了 Mobitesl ， 这是一个使用真 it 的 iPhone 和 
Android 手机提供的免费移动性能测试服务。可以从 
www . blaze . io/mobile 找到 Mobitest 。 

Blaze 的 Mobitest 就像是一个代理服务器。你告诉它你 
想测试哪个 Web 页面 URL ,另外想用什么设备来测 
试。 Mobitest 就会把你的测试请求放在对应该设备的一 
个队列中。 

你请求的那种手机可用时， Blaze 会跟踪记录它的测 
试手机与 Web 服务器间的所有通信，使你能 f 解到底 
发生了什么。 


甚至还有一个有意思的特性，它能录制页面加载的 
一个视颊，从而能看到使用这个手机的人所看到的情 
景. 



——试一试- 

来做些侦探工作，准备好了吗？现在来查看为什么 On Tap Now 页面这么慢。 

在 www . blaze . io / mobile 上测试 On Tap Now 页面 

On Tap Now 页面的地址是 http :// hf - mw . com / ch 2/ chapter 2/ ontap . html 。 

o 査看加载时间和页面大小. 

加载时间可以告诉你测试期间在这个手机上加载这个页面花费的 
时间。页面大小是与这个页面关联的所有资源的总大小，包括 
HTML , CSS 、 JavaScript , 图像，字体等。 

0尝试两个不同的手机，并比较速度。 

不仅网络速度会有变化，手机本身处理和显示页面的速度也会不同。 
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不要狨外表迷惑，达实际上是一个很大的页面 


这就对了！从测试可以肴到，页面的大小大约有 3 MB 。 甚至 
对于一个桌面浏览器来说这都要算是一个相当大的贞面了- 
在移动手机上难怪慢得像头大象。 

也难怪 Mike 的颐客对这个页面颇有怨言。在一个测 UiPhone 
手机上加载这个页面居然要花10秒的时间。 


瀑布图是一种常见的 Web 性能报吿。 

湛布图会显示浏览器从服务器请求来构建 
Web 页面的所有文件。直条表示下栽一个资 
源花费的时间长度。这里按浏览器从服务器 
请求的顺序列出了相关的资源。 

不过，不要“追逐” Blaze 报告页面上的瀑布。 
这里并没有我们侦探工作需要的细节。接下 
来会告诉你如何找到一个更有用的瀑布。 
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真正的响应性 



单击这个链接，你会进入一个新网站，名叫 HTTP 
Archive Viewer (HTTP 归档阅读器），在这里可以 
看到一个比测试结果页面更洋细的瀑布图。 


这个瀑布图会为我们显示浏览器 I 、载的每一个资 
源，这里会比 Blaze 报告页面上的瀑布图详细得多。 

’这个 费泰的 潘布®它由一 , • 


H/R 砉矛 H 丁丁 P 
Archive (HTTP 
峰） 。 运長一 
个夹件轶范，扶 
併3—种栝准方 
法弗纪彔匆览 
粽妒勝旁粽锖求 


pmock.il 

powcllsj 


• 枝兑式 VkN _ 

你能从这个瀑布图看出下载的文件中哪些 
可能有问题吗？ 


饮吐页审时矣生3 
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臃肿页面的统计饼图 

1000英尺的蒿空 俯视： 袅示统计信患 

HAR 瀑布图会显示你下载 f 哪些文件，服务器如何响应，以及下载 
花费的时间。不过在深入研究这个湛布图之前，下面先从高层了解 
页面的统计情况。 


黾击 HAR 阅读器页面上的 Show Statistics (显示统计信息）链接，可 
以看到一组共4个饼图。对我们来说最重要的是第2个饼图，它按文 
件类型对页面进行分解。把鼠标停在各个文件类型上，看看总的文 
件大小分別是多少。 






叼在 ci 个否的 e 个 

HTML/Text fti 

ja ^ Scrip , ㈣ WD * 

CSS 351 


Image 


Flash 

Others 



50 第 2 章 




真正的响应性 


找出影响页面速度 的累赘 

现在来深入分析这个瀑布图，明确这些大图像和 
JavaScript 究竟来自哪里。下面给出读这个图的要点。 


錡 t •黄求的 WelD 雨®，劣 

一个下抬 粜輩.列用这 
个菜輩芍以寿 ii 个缯 
加泛多 <16 (釦栌 
发螌> • 


a -行含分列 S 孑巧了构 
遣3个贞兩 i ¥ V # 求的备个 
不同玄碑：：把藏杉涔4 d 
H 看宅 t 的 kRU 


^兑阑 f 的瀑 4ff 


M 下载的 i 碑 
的 <•)•• 




http :/ / hf - mw . com / ch ?/ chapler2 / ontap.html 
GET ontap.html 


GET ups.css 

浏笵 8 硪求的类螌 (j, '.i GET maps ? f = qAsource * s_ql 

常 ic^BT, 不过如某 , .jj + CET bcnsons _ bubbler.jpg 

基—个表#呼么类货 3 * CET chapmanjownsdale.jpg 

舴基? > Osr 。 ♦ CET crysul _ springs.jpg 


2.7 KB 
214.2 K8 
121.8 KB 
86.3 KB 
92 8 KB 


輩忐 加咢. (% i )^ 

笆批釗•始器甸菔务 8 鵠求？ 啷签 内容•以 
总舨务器如何响应（也魷憙 H + TTPt 郝） 。 


蘇务基这 QT 的在 
兵. S . OO ^ L ^ " OK . o 


下戧 ( i 个 i 件 
辦 t 的的间 。 


1.98s 
192 ms 


1.36s 

1.38s 

1.39$ 


态条® s 斤出迂碎螬求问 
吋荇始.以双何时劣含下 
載 . 0 ‘ 耷很 •少的 i #芍以 
用时下载， 


浏览器和服务器之间的通信 置可能 极大，不过不要担心。 
你只需要注意两个 问题： 哪些资源最大，另外 JavaScript 来 
自哪里? 


▲ - 

再来看 On Tap Now 页面的瀑布图。找出 5 个最大的文件并分析。对于每个文件，请回答下面 

0文件是什么类型？ 

0文件来自哪个域？ 

0如果文件是图像，则髙度和宽度分别是多少？ 

提示： 可能需要复制这个图像 URL , 在一个新的标签页中打开，或者直接下载这个 
图像来查看大小。 

这些信息能告诉你什么呢？这对于你确定怎样做才能让页面更快会有什么帮助？ 
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练习答案 



0如果文件是图像，则它的高度和宽 
度分别是多少？ 

找出文件大小最大的图像。复制 
URL. 并在一个新窗口打幵。甚至 
不用看高度和宽度，也可以发现 
这些图像比在小屏幕上显示时大多 


嚷最 


本面笼器部用 
-1 Ci 同一个 i 邙, 
尽爷(象$ •子 <•) .不 (3(1 


^efufiSe 

§oLutiort 


你发现页面的问题了吗？下面来分析_ 

0文件是什么类型？ 

把鼠标停在文件名上.查看完整的 
URL 和扩展名，这就可以确定文件的 
类型，还可以增加一个文件类型列， 
这样能快速扫描列表。 


http:/ Zhf-mw.com/ch2 1 chapter^/onup.himl 
♦ CCT ont^p.himl 


CCT maps?! - q&source - s_q# 
CUT bensons_bubbkr.jpg 
CCT chapman_lownsdalc.jp 9 
err crysul_spnngs.jpg 


Type 


• Size 

• Timelir« 


o 文件来自哪个域? 


i 个九斿不 & 达 
，主苷之佟 和宇旮伐的 i 

St , 


现在到重点了。查看这个庞大的 174.8 KB 
的 JavaScript 文件究竞来自哪里。 


名蘧枝令在秃綦輩 
音@的下耔共增知 


GET 1 VBORWOKC 90 A/ 
GET {matn,mod_utH,rr 
iVBORwOKC^oA/ 


328ms 

j 473ms 
6 152ms 




丨 4 tt 的 


艾产⑽ .ci&ci 个 HU 、 的 
javascript i 4 


GET iVBORwOKCgoA/ >V 

hup ： //maps.qsfttc.com/cat is/inti/€n ALL/ 

GET 1 VBORWOKC 90 A/ 


Maps.gstatic.com 是 Google Maps 的域。浏览器在下载一个地图的 
JavaScript, 这个地图并未在移动屏幕上显示^很多可疑的文件都 
与 Google Maps 有关. 


: !28ms 

/ Imain.mod uiil.m<x 



蛑啭努 §IK 
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真正的响应性 


(rooglc Maps JavaScript 从 啷 里来 ? 


在移动手机上査看 On Tap Now 页面时，页面上并 
没有包含地图。为什么会下载这个 JavaScript 呢？ 
下面在桌面浏览器中打开这个页面研究研究， 

嘿，地图在这里呢。 Mike 肯定是做了特殊设置, 
使它只在较宽的屏幕上才会 a 示. 


在移动手机 _ h 隐藏地图确实有些道理。这对于小 
屏幕来说太 大了。 较早的手机可能根本无法处理 
地图复杂的 JavaScript , 而且我们已经看到地图存 
在大鼉 开销。 

那么， Mike 是怎样隐 藏地图 的呢？ 

—行代码就会全鄯 " F 栽 



地图是通过一个 iframe 包含在页面中的。这个 
iframe 会加载途立地图所需的所有组件。 

a f ^ f ') 


<iframe id="map" width="300" height="300" frameborder="0" scrolling="no" 
C 7 marginheight="0" marginwidth="0" src="http: / /maps .google.com. .. "></iframe> 

X I . . 1 1 '' 國 " 11 - 1 t M, '' 

ij 个致下戤^个丈 4! Cj 个窃大长 5. iif 电 •：？ 省略 i 



Mike 用 CSS 隐藏 M 搀 

Mike 知道我们如何使用媒体査询针对移动设备枝 
改布局。他在我们的媒体査询中加人了他自己的 
CSS 规則。 Mike 增加的规则将 iframe 的 display 属 
性设置为 none 。 

遗憾的是，将 display 设 S 为 none 后，尽管地图不 
再显示，但这并不能阻止它的下栽。 



个規趵将 dLs u . JC；6 
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优化这些图像 


迖些大橙玲怎么处理? 


这个页面上的图像需要减减把了。下面来看瀑布图，找出最大的图像， 
看看 它们为 什么这么大。 


+ GET powcredby.png 

♦ GET lhe_grotlo.jpg 
± GET wells_fargo.jpg 
+ GET taps.jpg 

♦ GET lransparent.pnc 


3.5 KB 
206.1 \ 
156.1 \ 
440.7 » 
；B 


670 ns 

丨 590ms 

S75ms 


^95 J 


1.24s 


S2ms 


iiiSSi ；* 夂的 之碑. 



没错.怛这并不意味着不下 tt 这个文件。 

类似于 Google Maps 的处理 （ CSS 中 display 域性设置为 none ) ，页面 
中也隐藏了 taps . jpg 图像。不过，就像地图一样，设置 display:none 
并不会阻止内容的下载。 


@media screen and 

[Other CSS rules are here] 

.header {display:none;} 


nd (max-width:480px) 


流式©係邾是超大®傀 


个# 中金罨 

T(rp NOW 毋面 
巧以•利浓妁5 
这个® 
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从潘布图还可以注意到一点，啤酒标签都是大文件，大 
小在93到132 KB 之间。它们都是桌面图像，只是使用我 
们在第1章学到的流式图像技术缩小了尺寸，以便放在 
屏幕上。 


所以这不是一个新问题，只不过页面上只有一两个图像 
时，这一点可能注意不到。但是一旦一个页面上放罝16 
个标签，突然之间，这些流式图像就会成为让页面速度 


4- 个嘩: •存杉爸的驾 

<•) .犬约是 
想办•:表 (it ( i , ^ 

(象爰 ik 负蒂 i / i 作 
起琅的兵薄 


减慢的罪魁祸首。 


真正的响应性 


看起采是移动贪好的，但实际上不是 


Jim : 嗯，太郁闷了。我觉得外表真能糊弄人，是不是？ 
Frank ： 至少可以确认 Mike 还没有破坏这个页面。 

Joe ： 是啊，我们任何人都可能犯 N 样的错误。这个页面上 
的问题相对严 t 一些，不过我想 M 站中每一个页面都吋能存 
在同样的 问题。 

Frank ： 那我们该怎么办？为移动设备逮立一个完全不同的 
网站版本？把响应式 Web 设计抛至脑后吗？ 

Joe ： 我们先不要太冲动。总有办法的。成功已经近在咫尺 
了。图像和 JavaScript 问题是不是什么共冏点？ 


Jim ： 看起来所有问题都归结干一点，我们都是从面向桌面 
的内容开始（不论是图像还是地图），然后再隐藏这个内 
容。 

Frank ： 完全正确。默认地会在浏览器中显示大文件，然后 
使用 CSS 将它们掩盖起来。不过，如果不仔细，那么看起来 
移动设备还是会下载这些大文件。如果某个方面出了问题， 
那么这可不是理想的选择。 



Joe ： 如果反过来，那么默认发送最小的文件呢？ 

Jim : 呵，有意思。这也是可行的。先从移动模板开始，然 
后为桌面浏览器增加内容。 

Frank ： 你说的听上去很像那种渐进增强。 

Joe ： 你说得对。这些年我们一直在使用渐进增强。现在唯 
一的差别在于我们是从移动版本入手，渐进地增强文档来满 
足桌面浏览器 

Jim ： 听上去应该可以。我们试试吧。 


新进增強可％俱进穸层 
识冰 页亩的 构洚。至少, 
每个人鞒鶬著到和谀伊 
户笮。扣弟有其強大的 
浼览粽，押么可％得到 
其多样式层和夯互惟弗 
玖瞽芹户的仿验。 
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移动优先，这只是出于礼貌 


非常小的屏幕 
(功能手机） 


1 ! 


基本 HTML 。 

简单布局。 

小图像。 

有限的 CSS 和 JS 。 


小屏幕 
(智能 手机} 


增加较新的 HTML 5 特性（如果支 持〉。 
简单布局。 

小图像，不过比功能手机上相应图像稍 
大。 

更多 CSS 和 JS 。 


中等屏幕 

(平板电 脯) 


議 


为了增大空间，可以增加一些 
可选的内容，如边栏。 

多栏布局。 

更大的图像。 


较大屏幕 
(桌面和电视> 


- . 一 • 


增加宽屏布局。 

更大的图像。 

对于电视屏幕，要优化导 
航，以便坐在10英尺外的 
人使用（他们会用遥控器 
搡 作〉。 


移动优先响应式 Web 设 i 十 

移动优先响应式 Web 设计 （Responsive Web Design , RWD ) 
的含义不言 自明： 这是一种从移动模板人手的 RWD 技术。 
尽管很简单，但这种方法确实能力非凡。 


锥费桕瘠 stit : 搌认伸 * 七 - KH 晦屮 M 

\ \ 
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♦Ci 發® 4— 普增琛的咧孑伐钧屯0么鉍:夫4龙沭璉0 




真正的响应性 


什么是渐迸增强? 


渐进增强把 Web 设计看作是一系列分层。第一层是内容。结合 
内容和语义标记来创建结构化内容。如果在这里止步，那么 
你会得到一个几乎世界上所有浏览器都能读的文档。 

有了这个基础之后，可以使用 CSS 增加一个表示层，再使用 
JavaScript 增加一个行为层。绝对不要假设浏览器支持这些特 
性，不过倘若浏览器确实支持，访问者可以得到更好的体验。 

多年来， Web 开发人员通常都是先逮 i 只在最高级浏览器上才 
能工作的应用，然后尝试确保这些 Web 页面能够在较早的浏览 
器上妥蕃降级（也称为优雅降级）。渐进增强則正好反 过来。 

移动伏 先设计的好处 



涞进 增荛魷緯基 一个分姿署权 
t 轶，负餺人 • 


移动优先 RWD 与渐进增强并没有不同。认识到这一点，所以 
很多人都把它称作是内容优先设计，因为内容正是渐进增强 
的第一层。 


不论把它叫作什么，关键都是从&基本的文档开始，这一点 
不仅能保证让更多的人看到，还有一些很好的副作用。 

移动优先有点像小碟节食法。用更小的《子吃东西，这样往 
往会吃得更少。 


桌面主页是一桌丰盛的大餐。各种各样的东西都在上面。 



语义标记是指表达内容含义的 
HTMLfe 记和属性。 


例如，豇面上 < hl > 标记包围的内容会 
比由<»12>或<口>标记包围的内容更重 
要。 


移动版本則是一个小碟子。你必须精心挑选，优先选择你的 
内容。 

一旦有了一个涵盖重点的移动网站，接下来最好问一些基本 
问题做好准备，比如，如果有些内容在移动版本中没有出现， 
那么这些内容是不是确实重要，有没有必要再增加到桌面版 
本中。 


如果 class 和 id 属性有类似 calendar 的 
值，而不是像 left 或 top 这样的表示值， 
这些属性也可以为文档增加语义含义。 
很多 Web 开发人员都采用一种标准方 
法使用类来提供更多语义含义，这称 
为微格式 （ microformat ) 。有关内容 
可以査看 www . microformats . org 。 


语义标记并不表示完全不使用类似 
< div >^< span > S 种没有增加含义的标 
记。事实上，要尽可能为页面的内容 
选择正确的语义标记和属性。 
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当前页面的结构检査 


• F 面拕迖个 Web 页面反过来 

因为我们已经在使用 RWD 技术，所以调整页面做到移动优先不用花费 
太长 时间。 下面给出一个简短的列表，列出了我们要做的几处修改。 

□ 让 HTML 尽可能简单，调整 CSS 的顺序，使移动版本最 优先。 ^ 

□ 调整 CSS 背 S 图像，对于毎个图像只下教一个文件。确保适当地使 
用 display : none * 

□ 对干不同屏幕分辨率，为<丨11^>标记提供不同的源文件。确保下载 
大小适当的图像。 

□ 如果浏览器支持 Google Maps ， 而且文档足够宽能够放下地图时，則 
用 JavaScript 为页面增加 Google Maps 。 


On Tap NowJ5 ® 的咨前结构 

打开 chapter 2 目录中非凡海象网站的 omap . html 文件。这个文件看上去与我们 
在第1章中构逮的文档非常 相似： 


•7 •再4名# 的 

<div>. Mitee 發 Jjf 了一 


因为我们已经用语义标记很好地创建了一个模板，这个文档已经很整洁也很 
简单。看起来要让内容做到移动优先，我们的主要任务就是去除 Google Maps 。 

由千以后还需要引用这个代码，下面用 HTML 注释使这个 iframe 不再包含在页 
面中。 


<div class»"navigation">.•,</div> 

<div class="header w >..,</div> 

<hl>..,</hl> 

<div id="visit” class="column">.•.</div> 
<div id="ontap" class= M column w >..,</div> 
<div class* w footer w >...</div> 


用<， >fc® 巧 «H#vlsit <div>♦ 

Lfrnwu !. ，: » 它 ii 轉域 

C <! — 

<iframe id="map" width="300" height= w 300 M frameborder= w 0'* scrolling= M no" 
marginheight= w O'* marginwidth="0" src="http://maps.google.com..."></iframe> 
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真正的响应性 


我着到的真是一个新页面吗？ 




问得好。内容的顢序现在还有问 H 。 

在主页上，如果移动窗口显示的第一个内 
容是 Visit Us (请访问我们）信息，那倒没 
什么。不过如果每个页面 LVisitUs 内容都 
重复出现，除非访问者向下滚动，否则肯 
定无法区别飪面是不是有变化。 

我们需要重排内容的顺序， itOn Tap Now 
信息在 Visit Us 内容之前出现。 


+ 动手做 I 

♦ 



复制 id 为▽丨8彳1的<(^>中的 
所有内容，把它们粘贴 
到 ontap < div > 下面。 


- ___ 

OxT^NovvatThi 

Sn I vomVVvr Rrs 

---~ ■一 

Visit (Js? 



Ox 1 \P TllfS MON'Til ： 



<div class="navigation">.•.</div> 

<div class*"header M >...</div> 

<hl>...</hl> 

<div id=’.ontap” class= n column">.. .</div> 
<div id="visit" class="column”>.•.</div> 
<div class= ,f footer M >. . .</div> 


「 .: • .抑厶… - 

Visit Us 内容对这个页面重要吗？更好的做法是不是该把它移到另外一个页面上，再 
链接到那个页面呢？或者干脆从移动页面中将它去除，如果是在一个更大的屏幕上 
显示页面，那么可以再用 JavaScript 增加这个内容，这样是不是更好一些？ 
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内容在页面上浮动 


修 i £ 沟容浮球 

我们对内容顺序的修改会破坏桌面浏览器中的布 
局 . Visit Us 部分现在位于页面最下面。 

第 I 拿中，我们曾经提到把右栏放在主栏前面是一种常 
用的技巧，这样可以吏 容易地 处理布局中的浮动。如果 
你希望一个内容块浮动到某个内容旁边，就需要在源代 
码中把它放在前面。 

不过不用担心。这里可以做一个简单的修 E , 之前我们 
是把 Visit Us 内容浮动到 On Tap Now 内容的左边。实际 
上，完全可以把 On Tap Now 内容浮动到 Visit Us 内容的右 
边。 

打开 taps . css , 完成以下两处修改 • 









真正的响应性 


移动优先娣体 t 询 


现在来做一些常规的 C 作。第1章中，我们先从一个桌面网站开始，然后把它改 
为适用予移动设备。现在我们把这个过程反过来，先从锒简单的内容开始，逐步 
建成为桌面应用（而且会更檸）。 

不过，首先需要承认，在 css 领域，移动优先的说法有些用阗不当。对小屏幕应 
用媒体査询之前，我们要设置所有基本样式（包括颜色、字体等），然后再逐步 
增强。 

这样做有一个很好的理由。很多移动浏览器根本+理解媒体査询。所以我们要确 
保它们至少能得到基本样式规则。 

含理组 织你的 CSS 

css 文件通常就像是树房的杂物箱。开 始时岈 能很有条理，很整洁，不过过一段 
时间就会变得乱七八糟。要加入移动优先媒体査洵，可能需要先从布局规则屮挑 
出基本样式规則。 

幸运的是，第 1 章建立的 css 已经很不错。大多数基本样式规則已经放在文件最前 
面，增加布局和格式的媒体査询位于文档靠后的位置。我们要做的就是把移动媒 
体査询放在桌面赍询前面。 






小屏“ 


大屏 y 


css 含泊着 •> •属 瘳利丈 廣尊 

垆珞拎朶金 木 


/* Wider viewports/higher resolutions (e.g. desktop) 
@media screen and (min-width:481px) 

[Desktop layout rules here] 

j -- — — 

/* Mobile/lower-resolution devices */ 

@media screen and (max-width:480px) 



㈣ 处糾 t # W . 1 ’ 本气 $ 
上蛋 ，: i 饵一來.巧以磁係％的洛 
粟爱< 4砝(尤光糸逬律努方:在护 



我们已经对页面做了一些修改， 包括： 


删除 Google Maps 


修正浮动 


• 重排标记 • 重排媒体査询 

最好做个检査，确保页面能正常工作。在一些桌面和移动浏览器中加载这个页面，看看外观怎么样。 
务必要在 Internet Explorer 中检查 • 
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条件注释生命线 


意外 •『 Internet Explorer 中页面出问趣了 



之前提示过你可能想在 Internet Explorer ( IE 沖测试这 
个页面，不要告诉我那时你没有想到可能会出现这种 
结果 • 与 IE 斗争简直是 Web 开发人员的必经之路。你 
可能 Q 经被先前的斗争吓住 f , 很淸楚肯定会有一个 
IE 怪兽在前面等着我们， 

那么这到底是怎么回事？原因就在干 IE 不支持媒体奔 
询。 


先别把书丢到一边，责怪我们不该教一些在全世界敁 
流行的浏览器中无法派上用场的东西，深呼吸，放松 
一点。有很多方法可以绕过 IE 的（很多）缺陷。 

/ 

洩们15点太扣《息魬冬；8 


说. 16 ^ I'J ftl 4 & ^ ^ ^ ?lJ 


Internet Explorer 的救 生艇： 条件注 # 

Microsoft 提供了 •个很好的 T - 具，可以帮助 Web 开发人员通过条件注释 
编写专门针对 Internet Explorer 的代码。 


.„*4- re sSS.V-?(lt)l6 s 不 4 ,e Mob “ e (" 6Mobiu > 

f 二 m. 咖 ㈣ 器 — 以 

〆 


〒以 存 http : //bit. Lij/ig co»>M.vu^Kts 


^5®^^ , HTML I 

T - 

过 H !•)&,# 

含 *5 -.->** ii 个 ii 

mi ^, 嵙佔 
列 ％器衾孢它寿 o 
4 —个: i 转.斿发 


.<! —[if (It IE 9)&{!lEMobile)]> 

<link rel*.’stylesheet” type="text/css M href="layout .css*' media= w all" /> 
<![endif]--> 反 

wlimammmmmmmmmmrnismmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 


•i 个例孑 S •子5 -个的链 4. 不过这刁以句 (i 舍乓沒 HTMLt 
柃中的泠容. 
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真正的响应性 


对媒体 t 询使用条件注释 

你可能注意到了，条件注释指向 laymu . css 。 现在就来创建这个文件。 

我们要从当前样式表中取出一些规则。之所以把这个新文件命名为 
layout . css , 这是因为它只用子有足够屏樁空间可以支持多栏布局的浏 
览器。 

0创建一个空的文本文件，命名为 layout . css ， 把桌面规则复制到这个文件中。 

一定要复制幵始和结束媒体查询之间的所有内容，不过不要复制 @ media 规则本 
身。 


taps.css 

/* Wider viewports/higher resolutions 
(e.g. desktop) */ 

@media screen and (min-width:481px) { 
.column { 

margin: lOpx 1.04166667% 0 0 

} 

ivisit { 

margin: 0 68.75% 0 0; 

} 

♦points { 
width: 25%; 
float: right; 

) 

♦main { 

margin: lOpx 27.0833333% 0 
26.0416667%; 

) 

lontap { 
width: 67 %； 
float: right; 
margin: lOpx 000; 






l 制 C ： 冶.从 tflps .& ss 中刪铁 li 哆規則扣哆规則 
的这，'本全洵， VJ .% 2含的 HTML 丈枝•在用 ii 發坭則 


layoutxss 

.column { 

margin: lOpx 1.04166667% 0 0; 

} 

♦visit { 

margin: 0 68.75% 0 0; 


想射氮 

mx^' 

4 中 


} 

#points { 
width: 25%; 
float : right; 

) 

fmain { 

margin: lOpx 27.0833333% 0 
26.0416667%; 

) 

lontap ( 

width: 67%; 
float : right; 
margin: lOpx 000; 

} 

»i ..Il l 
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条件之爱 


o 增加一个指向这个新样式表的链接。 

对于支持媒体查询的浏览器，如果屏幕足够大，则我们会增 加一个 
指向这个新 layout . css 文件的链接。 


clink rel= H stylesheet" type= w text/css w href= M taps.css" /> 

<link re1= M stylesheet w type= w text/css w href="layout.css" media^^all and 
(min-width: 481px)" /> X\ 


个 UiAJetf 记缯 ~ 






0增加旧条件注释。 

我们已经让它在大多数桌面浏览器上都能正常运行6现在只需要 
增加之前创建的条件注释就大功告 成了。 



11： 砝係东 矛旧浏 


0 又该测试了， 

在支持媒体查询的浏览器以及不同版本的 Internet Explorer 中 
这个页面。看起来还不错，是不是？ 

4 也钱王 詻嘁 易？‘ 
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真正的响应性 


^如果用业界最高性能的 4G 手机， 
性能还算是问题吗？ 

当然] \即使是 4 G 手机，有时 
也可能会在 EDGE 网络中使用 （EDGE 
是一个比校老，比较慢的 H 络），研 
究表明，速度馒的网站会减少使用量， 
直接影岣最终结果。 

:为什么我会从 Blaze Mobitest 得 
到不同的结果？ 

¥:出现这种情况有很多原因 a 每一 
次測试时，取决于网络流量，页面下 
栽时间会改变。对应各个操作系统的 
Google Maps 代码都有所不同，而且可 
能随时间改变.随着操作系统新版本 
的发布，手机的行为也可能改变。在 
这本书中，我们使用了 Blaze 的 iOS 4.3, 
Android 2.2 和 Android 2.3 測试设备来完 
成測试。 

对于测试结果的差别不用太过担心. 
重 点是那些本来没有必要下栽的代码 
和田像。 

把样式表分解到两个文件中，这 
样不是使网站加载更慢了吗？ 

^^^ HTTP 请求数会使下载速度有很 
大差别（请求数越多，下载越 慢}, 
这一点确实不假。所以我们不能箏撞 
地增加请求。在这里，我们认为分为 
两个文件更合适，这样 1 E 也能使用同 
样的文件。 


tlierei^re no 

Dumb QuestiQns 

| v ^) I 你提到过建立一个代理服务器可 
能很有意义。你有什么建议吗？ 

I :有很多代理服务器，包括一些非 
常棒的开源产品。很凑巧，我们是一 
个名为 Charles Proxy 的商业产品的粉 
丝。 

缺少插件好像是个大问理。如果 
没有 Firebug 和 Web Inspector, 那么 
该怎么办呢？ 

这可不容易，首先，很多谓试工 
作可以在桌面浏览器中完成，只要注 
意这个过 祛中有 痊时候要在实际设备 
上測试。 

还有很多新工具在努力 统开 这些插 
件限钊 。 Mobile Perf Bookmarklet 
( hup :// bit . ly / mw - perf ) 就包括很多性 
能工具 。 weinre ( http :// bit . ly / mweinre ) 
和 Opera Dragonfly ( http :// opera . com / 
dragonfly ) 允许在桌面浏览器中运行 
Web Inspector 来检查手机浏览器中发 
生的情况。 

I切换到移动优先媒体査询后看起 
来没有多大改变啊。那又何必这么麻 
烦呢？ 

对于这个页面，桌面优化 CSS 文 
件和移动优先 CSS 文件之间确实没有太 
大差别。不过.从我们的经猃看，这 
只是个例外 。 如果有史复杂的样式， 
那么通常你会希望追用较宽朞暮的规 
則度盖一些（但不是全部）为较小屏 
蓼 设置的样式，重排媒体查均颀序可 
以确保 CSS 层叠行为与随着漭摹变寬 


漸进增强页面的目标是一致的。 

R r 看起来桌面和移动浏览器中内容 
的顺序通常会不同。更复杂的页面中 
如何处理这个问题呢？ 

哈，你抓住问題的关键了，是不 
是？没错，这正是响应式 Web 设计中 
常見的难題之一. CSS 3 中的 Flexible 
Box Module ( Flexbox ) 承诺提供一种阂 
便方法，可以在样式表中重排内容的 
順序》通过结合 Flexbox 和媒体查询， 
你完全可以根据需要重排页面中的噸 
序。 遣揀 的是， Flexbox 还只是初出茅 
庐，没有得到充分支持，所以开发人 
员会求助于 JavaScript 重排内容顺序， 
或者结合使用 RWD 和设备检測（见第 
5 幸）。 坦率地讲，内容排序和图像处 
理仍然是 RWD 中的两大难題。 

I不支持媒体査询的 IE 版本能看到 
响应式设计吗？媒体査询是不是没有 
必要呢？ 

"internet Explorer 会 JL 示桌面版 
本，它还会显示流式内容和灵活的图 
像，不过不会基于媒体査询指令改变。 
如果媒体查珣支持很重要，則可以使 
用一个名为 Respond . js 的开源库，它 
能为较早的 IE 版本提供媒体查询支持。 
这是一个相当全面的脚本，所以如果 
决定使用則一定要全面地測试。 
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用媒体査询修 IEdisplay:none 

惰况怎么#5? 

我们已经建立了基本 CSS, 而且适当地调整了 CSS 的顺序。接下来要做什么？ 
Q itHTML 尽可能简单，调整 CSS 的顺序，使移动版本最优先。 


□ 调整 CSS 背彔图像，对于每个图像只下栽一个文件。确保适当地使 
用 display:none 0 

□ 对于不同屏幕分辨率，为 <img> 标记提供不同的源文件。确保下栽 
大小适当的图像。 

□ 如果浏览器支持 Google Maps, 而且文档足够宽能够放下地图时，則 
用 JavaScript 为页面增加 Google Maps。 


调 整页眉 ©僬 taps 


从我们的瀑布图可以看出，有一个很大的 CSS 背景图 
像， 不过利用 display :none 把它隐藏起来了。尽管它从 
来不在页面上显示，但浏览器还是会下载这个图像。 



因此要确保只在需要时才下载这个图像。怎么做到呢？ 
可以把它放在一个媒体査询中，这样只有当屏幕宽度大于 
480像素时才会下载。 

不过，并不是创建一个全新的媒体査询，完全可以把这些 


，个 ㈣ . 




CSS 规則放在 layout.css 中，这个文件已经通过<1^>标记 
中的一个媒体査询包含在页面中。 


把 ii 普代砝行认 ttrps.&ss 
4 W i ') lajjout.ftss 的束 1 3 


.header { 

background : URL(•images/taps•jpg•} repeat-x; 
height: 300px; 




6SS.C1.® . kL 
JlH. 


试 


使用 Blaze Mobitest 检查 On Tap Now 页面，确保不再下载 taps.jpg 。 要在 iPhone 
和 Android 设备上都试一试《 » 如果你的页面不在一个公共服务器上，则可以使 
用 http://hf-mw.eom/ch2/ex/3/onta p. ht m I 来完成测试。 
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在 IPhone 上玎认，不过在 
Android 设杳上还是含 T 簌 

达个©傖。 ^/CET sauvie _ island.jpg 

+ GET tryon _ creek.jpg 

+ GET taps.jpg 

20 Requests 


200 OK 
20C' OK 
200 OK 


102.5 KB 
149.9 KB 
440.7 KB 

2.1 M 騰 


Blaze 的 Mobitest 指出， Android 仍在下教这个田像，不 il 这只 ft 
一个误报。 

Blaze 必须修改它的手机来完成远程测试，这会导致一些偶然的奇怪行 
为。 

使用一个普通的 Android 手机时，并不会下载 taps.jpg 图像。 

©係伏化卷土重来 

问想 Web 发展初期， Web 开发人员很多时间都在考虑图像优化的问题。 
随着带宽的增加， Web 开发人员不再像从前那样“斤斤计较”，竭力 
提高图像的每一分性能。不过，移动设备使图像优化再次变得重要。 

看起来我们可以利用一些基本的 Web 图像优化技术让 taps.jpg 图像更小 
一些。可以把 JPEG 质1从80改为45,这样能让这个图像变成 78KB 而不 
rfii 且必须仔细査看才能看出二者图像质量的差别。 


是原来的 440KB, 

化一采耜筠龙重 
# 爱兮的邊相从来 
砟基乇 4 保兑的即 

^vitb J 


I 曼 f 3 Wweb® (象说化 . 
芍以夺圯 《Head First html 
XHTML> 的蓽 5 


㈣ 这不象 )” 
s»v.tcsi»lit.COt«it X* — 赛讳 


将 taps . jpg 的优化版本从 
extras 文件夹复制到 images 
文件夹，用一个较小的版本替换 
原来的大文件。 


ymn 

Er ^ . r '?4 / 

MM—B 




哉 f) 值用 Photosh 叩优化这个辣埒.不过龙含_ 
笱以迻用伢暑攻的 H 姑 wetoffi 緯鹐《器 
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为设备缩小图像 


一个 src 完金控制 

CSS 图像简直带来了一场图像之灾。每个响应式设计中 < img > 
标记都可能带来问题，因为 src 属性只能有一个值，而不论屏幕 
大小如何。那么如何提供大小适当的图像呢？ 


Ovy . 丁 N0V 

蒼,部使用 


㈣ 工 


戏 fHf f 璀翔 S 攥 <•) .袼琪 ii 个®罈的多 
个 舨本. fSHTMLP •元许 SKC 节一个 


<img src="brews_images/bensons_bubbler.jpg" alt="Benson's Bubbler" 


人们可能希望使用 JavaScript 替换 src 属性的值。遗憾的是，大多数浏览器 

会提前査看 HTML 文档， JavaScript 可能还没有完全计算就已经完成了图像^'也不《用 c^sgl 
的预加栽。通常这意味着在 JavaScript 改变 src 之前已经下栽了大小相同的 
文件，这会导致重复下载，而且还会让浏览器重逮页面布局， 

响应式 扭谁册务器玎认帮杧 

如果浏览器无法向服务器请求合适的图像，服务器就必须自己来确定了， 

这正是 Sencha.ioSrc 要做的事情。 滅 ^ ^ 

我们可以使用 Sencha.io Src 为毎个设备提供最佳大小的图像。 


将的蓽一郝分设 2 ^^ttptZ/src. 
sewcVui u >/, I 


梦相 蜉伐的蛾知 珞柃.耗后 it 扣伐 S « 戊* 的《 砵的 


<img src*"http://src.sencha.io/http://[DOMAIN] / [PATH 】 /brews_images/bensons_ 
bubbler.jpg" alt»"Benson*s Bubbler n > 



Sencha.io Src 
只会收缩图像。 

它不会放大图像。 
放大图像会导致质 
置很差。 最 好是找 
到一个更高质量的源图像》 


S . t ^ cV\Qio Src 含钃赘 © 簿 Cl 合设备屬筝的犬 
•)%例如.如粟用问迖个网站.阑嘴妖含 
葙剩在與屬畢 (3 SO 斗 ffof 拿素 ） ti ® (*» . 



4- 

动手做 t 

♦ 


更新 ontap . html 文档中的所有啤酒标签围像，改为使用 
Sencha.io Src 。 
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Sencha.io Src 如何工作 

Sencha.io Src 的工作就像有魔法一样。你从 iPhoneig 求一个图像，它会给你一 
个适合 iPhone 大小的图像。使用功能手机呢？没问题， Sencha.io Src 会给你一 
个很小的图像。如果从桌面浏览器请求会怎么样呢？则它会提供原样大小的图 
像。 

Sencha.io Src 怎么知道要提交多大的图像呢？它会使用浏览器的 user-agent 串 （< 

这是每个浏览器都会提供的一个标识符），在一个大数据库中査找这个设备。 

这个数据库包含了成千上万设备的有关信息。这个设备数据库记录的信息之一 
就是屏幕的大小。 

一旦 Sem : ha . i 0 Src 知逬屏幕大小，则它开始将图像缩小到这个设备的最大宽度。 

然后把它创建的图像在一个缓存中存储30分钟，这样以后请求同样大小的图像 
时速度会更快一些。 

< img > 标记浚有最佳藓决方索 

使用 Senchiio Src 也有缺点。它依赖 f 设备检测，有时这会出 M 题（第5章将更 
详细地讨 论）。 另外还需要通过一个第三方传送你的所有图像。 

^^- 

事实上，对于如何处理不同屏幕大小的不同图像源问题，目前并没有最佳的解 
决方案。不过，请紧密关注这个领域，因为很多人都在尝试寻找一个更好的解 
决方案。 

最后的妗改：优化的唓潘标签©傀 

与 taps.jpg 图像类似，通过保存 JPEG 质最稍有降低的啤酒标签图像，可以减小 
这些图像的文件。不用担心，我们会为你完成这些优化。可以在 extras / labels - 
optimized 目录中找到优化后的图像。 

把优化后的图像复制到 brewjmages 文件夹，替换所有现有的图像文件。 

现在我们应该有了一个高效、快速.移动优化的 Web 页面。使用 www . 
blaze . io/mobile 测试这个页面，看看我们的工作成效如何.适当选择，让 
Blaze 在手机上运行3次测试，得到平均值。将新页面的总文件大小和下载 
时间与原页面做个比较。 

如果你的页面不能公幵访问，则可以使用 http :// hf - mw . com / ch 2/ exM / 
ontap.html 来测试。 
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vcscr 赛名• ㈠ 么 ? 





.优化后的性能 


真是超饫地移劫 Web 页面 

我们的减肥计划起作用了！现在 On Tap Now 页面比从前瘦 
了87%。 iPhone 下载时间从大约12秒减为3秒。 


之前 




Web 性能优化是一个不断发展的领域，还有很多 
其他方法可以让页面速度更快。我们还可以采取 
哪些性能改善措施来提高这个页面的速度？ 
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fjie re litre no 

Dumb Questipns 


r ^ 5 ) r 为什么浏览器会下载根本不会用到 css 图像？ 

浏見器通常无法确 b 地知道一个图像并不会用 
到。这可能是一个只在某个 JavaScript 或 CSS 活动触发 
时才&示的图像，浏 見器会 提前下栽这些图像.这样 
如果一个活动突然触发要显示的图像，访问者就不用 
等 待了。 

lAr 知道了，那么为什么不会下载媒体査询中的图 
像呢？ 

原先浏見器也会下载媒体查珣中的图像。浏見 
器制造商了解了开发人员如何使用媒体查询，所以相 
应地调整了浏見器行为，这些都还是相当新的内容， 
正因如此，有些浏見器仍然会下栽媒体查询中的资源 
(尽管并没有用到）. 

1^ I 通过 Sencha.io Src 传送图像安 全吗？ 这让我很 
紧张。 

小心一些当然很有必要。如果你的网站中莱个 
重要部分集成了一个第三方报务，俺若这个服务出了 
问題，你就会受到牵遑 . 


R I 其他媒体呢？视頻和音频也存在同样的问题吗？ 

单地讲，确实如此。 HTML 5 视頻和音頻格式 
要稍好一爸.因为它们允许你采用不同的文件輅式定 
义媒体的“默认”版本作为退路。如果浏 JL 器不支持 
提供的第一种选择，就会查看下一个选择。 

尽管要好一痊，不过这种方法对于解决网络速度或分 
辨牟没有任何作用。在无线网站上使用移动手机的人 
可能不需要一个高清廣量的梘频。实际上， Apple 公司 
的 QuickTime 视頻提供了 一个视頻参考格式，可以根 
据互联网连接速度提供梘頻„ 

是不是只有这些？或者响应式 Web 设计是不是 
还有很多相关的未知情况和问题 

¥:确实有很多难題。与所有新技术一样，人们仍 
在探索哪痊可行，而哪痊不可行， RWD 很 前沿. 正因 
如此，我们在这本书中会谈到很多技术。通常你需要 
钴合这些技术来提供最佳体验。 

尽管存在这痊问題， RWD 的承诺还是激发着很多人 
在努力构建史完备的解决方案。 RWD 领域可谓日新月 
异. 


Sencha 室称专门致力于提供这个服务，而且会一直兔 
费。 不过可以想见，如果莱个大型网站开始使用这个 
腹务，則 Sencha 肯定需要得到相应报馴，否則将不能 
运行这个服务。 

如果你不喜欢 Sencha.io Src . 則也可以使用我们在第5 
章介绍的设备检测工具构建一个类似的股务， 

除了 Sencha.io Src 外，还有没有其他选择？对 
于<101 9 >标记问题.有没有仅在客户嬝的解决方案？ 

¥ :在响应式设计中还有很多不同的方法来处理 
< img > 标记《很多工作正在进行当中.力求找到一种 
不需要设备检測的解决方案„每种方案都有一些弱点. 
包括我们在这个项目中使用的方案。可以在 http :// bit . 
Iy / rwdimgs 2 了 解 这姿技木的一个全面介绍。 
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放大还是不放大 9 


还记得第 1 韋中的 viewport < 1 ¥ 1 © 18 >标记呜？现在 
来更详细地讨论这个标记。 

viewport <meta>fe 记告诉浏览器期望的页面大小和级 
别（即放大级 別）。 其中还包含一些控制，可以避免 
用户改变页面的大小。 



在 viewport < meta ># 记 i ： 硿制放大 

在 ontap.html 文档的 <head> 中可以找到 viewport <meta> 
标记。语法相当简单。 


< 从 Ctfl > 杉记： 


总㈣ 贪- 个迮考 
M 它 (1 埒. 


戍舍的«度„ 9以轄擘蠹设 f. 


"viewport" content= M width=device-width, initial-scale=l, maximuin-scale=l*' /> 


t’ft 15 否矛的 f > 始边列 （残放 <边糾> . 的今如何读故贞面声方 一 9以朽用 sca Lc 
( i 表孑之 枯在去接苒 i 个咳和 2笱一个走似的避免用户超大否蒂， 

常 <•)• S 系 - bulvu-M^vc^ ^ al £ t & £ . 
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放大的杈利 




命 


动手做 I 


这*实会影 喃可访 问性。一些 Web 开发人员甚至声 
称移动设备上允许放大页面是一项基本权利。 

我们没有必要那么夸张，不过放大确实很重要，在 
禁用之前一定要仔细考虑。 

至于设计者为什么会禁用缩放，这有很多原因。如 
果页面在使用复杂的触模手势，禁用放大后，人们 
能够更容易地在屏幕上成功划扫。 

iOS 中还有一个 bug ， 设备旋转到水平模式时会改变 
放大等级。这个 bug 会让页面放大， 

导致页面的右边被切掉。 



爯打孖故大特性 


要想再打开放大特性，需要从 viewport 想 

< meta > 标记删除 maximum - scale 设置。 



该 UvUwport <w 


• 好•记.蒯 


<meta name= H viewport'* content= , 'width=device-width, initial-scale=l 



着 tas 的放之 bu 0 究奄食專致怎轉 的铉蓽 


一金 I 剩餘 scflU = l " 
后承多余的 vl 咢 
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制订最后步骤 


重诊到我们的 i £ 常矽程 

解决 r 突发的视窗问题之后，下面来看我们的进展情况。现在这个移动页面速 
度很快，已经很接近移动优先 RWD 。 剩 F 要做的就是如果屏篠足够大再把地 
图增加到页面中。 

让 HTML 尽可能简单，凋整 CSS 的顺序，使移动版本最优先。 

[7f 调整 css 背景阁像，对子 每个阁 像只下载-个文件。确保适当地使 
用 display : none 。 

^ 对于不同屏幕分辨率， S < img > 标记提供不同的源文件，确保下载 
大小适当的图像。 

□ 如果浏览 器支持 Google Maps , 而且文档足够宽能够放下地图时，则 
用 JavaScript 为页面增加 Google Maps 。 


值用 JavaScript 増加地 © 

现在只剩下一项任务，就是在浏览器窗口足够宽时再把地图增加到页 
面 t 。 我们已经看到，如果使用 css 隐藏和显示地图，則地图的资源 
还是会下载。 


所以需要使用 JavaScript 在适当的时候增加地图。可以把这看作是我们 
已经了解和喜欢的媒体査询的一个 JavaScript 版本。 


得到之前预留的 Google Maps iframe 代码。现在需要把它放问到页面中， 
以便显示地阁。 T 面将更仔细地分析这个 iframe 代码。 




:炫) 


<iframe id="map" width="300" height="300" frameborder="0 H scrolling="no M 
marginheight= M 0" marginwidth="0'* src= H http : //maps.google.com..."></iframe> 
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考虑爯三，她橙还是很布用的 

位置，位置，位置！ 

谈到移动手机，即使是句老话也会有新的含义。由干很多手机可以 
通过 GPS 或者其他三角定位方式确定你所在的位置，使用位罝提供更 
有关联性的内容是很常见的。 

Mike 为移动设备隐*了地图，因为地图实在太大了。我们已经看到 
为显示地图需要下载多少个文件，所以隐《地图是有道理的。 

不过这并不是说地图不好。所以在比较窄的屏幕上可以不嵌人地图， 
而是链接到地图。 


增加一个持向地©的链捿 


要链接地图，需要一个 < div >， 我们的 JavaScript 可以引用这个 < div >。 
它包含一个 < p > 标记，其中包括一个地图链接。你能想出我们为什么 
要这样安排吗？ 


鰣以““加一个 <dLv> - 




>动手做 i 

C + 


糾用< ? > 钤记的 M - 
的子虼宽的采籌婊 4 ’二、 

Ifrfl^e.— 这含介 
f S 4 多0内容 


龙 ii 个枳 <以\/>坩加 


Google Maps</a> 


<div id= "mapcontainer"> 

-Xp id-' , maplinX"> 

<a hr*f="http://g.co/maps/jm2pw">Vi« 

</p> 

</div> 

，< !— 

<iframe id="map" width="300" height="300" frameborder= *'0*' 
scrolling="no" marginheight= M 0 M marginwidth="0" 
src ssW http://maps.google.com. .."></iframe> 
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这有点像媒体査询 


在 JavaScript 中建交一个伪娣体奎珣 

下面来看用来在贞向' 中插人 iframe 的 JavaScript 代码。这个代码就相 
当 F —个非常简黾的媒体杳询。 


•: i 个 if 时6客器元棄的 K 我妾管.览喊 
^ 洋加 1*)这个窖器中 iif 縫甬5 一个立 
等.达轉妗來容槔地的铨 


^br««Jep^utt t § ：S f 

breal ? pai.yU (■}> 
，魚）表 子一个 《{： 涿芭度 
S ， 21.12 个茫度的杖含、 



仝卷戍穿 t 皂袅 s ^ 


汰哆铍鉍 H 巧这个扣 
tfrayu.ex * tft^oiSij ^ % 

^ c ^ oa^lc Mtrps 
代 砝/ 4 歿 t 制琿裱的_ 


嘈加一个 ^Tettfraw.c?t # . 
龙 •£ ^.f y^ay>eltMv^ t f 


' O ' 


( i ^ vtflpdcw ' Ci ^) ^') 

( Lrt ) 幸. 

(►vujplik^te) tt 段落柏系 .. 


<script type= n text/javascript w > 

►var breakpoint = 481, 
id =* ' mapcontainer', 
viewportWidth = window.innerWidth; 
if (viewportWidth > breakpoint) { 

var mapElement = document.createElement('iframe') 
mapElement.id = 'map *; 
mapElement.width = '300'; 
mapElement.height = 1 300' 
mapElement.frameborder = 
mapElement.scrolling = 'r 
mapElement.marginheight = 
mapElement.marginwidth = 

^ mapElement.src = 'http://maps.google.com/maps?f=q&so 
urce=s__q&hl=en&geocode=&q=334+NW+llth+Ave,+Portland,+0 
R+97209&aq=&sll=37.0625 # -95.677068&sspn=58.164117,80.3 
32031&vpsrc= ： 0&ie , =UTF8&hq=&hnear=334+NW+llth+Ave # +Portl 
and, +0regon+97209&t=m&ll= : 45.525472, -122.68218&spn=0.01 
804,0.025749&z=14&output=embed , ; 

-^■document.getElementByld(id).insertBefore(mapElement, 
maplink); 

) 

</script> 


' O ' 


*0' 


^ ooqU Mopsij 
^ 你 9 餘不 
铒入- ^Jht4 

我到 ( i 个代^^ 


去除注释縳的 tfratne 代码 

我们不再需要原来的 iframe 代码，所以将它从 HTML 文 

档中删除。 _ 

<- i — 射铨 ii 昝代砝《今 1 

<if-rawe id-^ap 11 - yidt-h« n 300 n height^jOe 11 f raTneborder= H O u - scrol 1 ing= ll no u 
marginheight rrtarginwidth- rM 0 , *- ■ 3rc^"http -： / /maps .google, cow. . . '*></iframe> 
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将 JavaScript 增加到 On Tap Mow 贞涵 

现在我们要把这个 JavaScript 增加到豇面。由 T _ 地图是一个锦上添 
花的特性，而不是基本要求，所以我们打算把它作为最后才增加 
的一个内容，到最后才 It 浏览器把它增加到页面上。 

打卉 W;»«vd •我 fO HTML 

的家 




<div class="footer"> 

<p>See you soon! Love, The Splendid Walrus</p> 
</div> 

[INSERT SCRIPT HERE] 

</body> 

</html> 


把不太重要的 JavaScript 放在贞面 ft 下面，这是一种很好的做 
法，可以让页面加载得更快。浏览器会解析所有 HTML 和 CSS ， 
然后才会到达 JavaScript 。 访问者能更快地得到•个可用的页 
面，而不用呆呆地等待地图代码加载。 



该测试一下我们的工作了.对于这个 omap . html , 回答以下 问题： 

0会在移动手机上下载这个 JavaScript 吗？ 

在 iPhone 和 Android 上使用 www . blaze . io / mobile / 
加载这个页面。检査瀑布图，査看是否在下载 Google Maps 代码。如 
果你的 web 页面不在一个公共网络上，则可以使用 http :// hf - mw . com / 
ch 2/ ex /5/ ontap.html 来 测试. 

0在较大的屏幕上地图会出现吗？ 

在你喜欢的桌面浏览器中打幵 On Tap Now 页面。窗口宽度大于480像 
素时地图会出现吗？ 

0地图适应响应式设计吗？ 

试着调整浏览器窗口的大小。地图会像设计的其他部分一样相应缩放 
吗？地图显示有没有什么问题？ 
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地图是响应式的吗？ 



使用 iPhone 利用 Blaze Mobitest 服务检查这个页面。单击结果页 
面上的 HAR 文件链接得到详细的瀑布图，查看下载的所有文件。 

地图文件没有下载。太棒了！ 

那么 Android 情况怎么样呢？ Blaze 指出 JavaScript 还是下载了， 
不过这也是一个误报。 

我们提到过， Blaze 必须修改它的手机以便完成远程测试。 
这个修改有一个奇怪的副作用，就是在测试手机上运行的 
JavaScript 报告的屏幕宽度会远远宽于 (800 像素)未修改的手机 
报告的结果。 

相信我们，这个 JavaScript 能正常工作，另外 Android 上并没有 
下载地图代码。 


在较大的屏幕上地图会出现吗？ 

是的。在我们的桌面浏览器上地图看起来很不错。 

蟪® 出现奋 041|^从中. ci 汰犹我的 
javascript 起 n 用？ • 



地图适应咱应式设计吗？ 

哦，不妙，这里有问题了.地图没能像响应式 
设计的其余部分那样相应缩放。不仅如此，屏 
幕上有些地方地图还覆盖了啤酒标签。 
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迖些鄯件不是响应式的 



响应式 Web 设计实在是个新兴产物，所以像 
Google Maps 之类的部件 K 认情况下不太可 
能是流式的， 

公司提供部伴嵌人到其他 Web 页面中时，他们会 
尽其所能确保这个部件能正常工作，而不论页面 
有怎样的布局。这通常意味着 HTML 本身会对类 
似高度和宽度等厲性提供硬编码设賈。 


我们需要处理不完善的第三方部件，这几乎是毎 
一个移动网站都要面对的问题。响应式设计还有 
一个额外的需求，就是部件也应当采用流式设计。 


瓮度知惠度技® 玄的这 

*5 池 ff et 病砭。 



<iframe id="map" width="300" heiqht="300 M frameborder= M 0" scrolling="no" 
marginheight= ,, 0 , ' marginwidth= M 0" src= M http://maps .google.com... "></iframe> 



\ A 个 i ： 的嚷多部芍以稃 5 c * ss . 


理想情况下， HTML 只包含内容和标记。它不 
应包含任何表示信息 # 

哪些 CSS 厲性与 iframe 中使用的属性对应？ 
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使用 css 提供表示 


将 i 什 awe 厲性移 1CSS 

下面尽可能将 iframe 的厲性移至 CSS , 并使它们采用流式设计。 

首先，需要创逮想要移动到 CSS 的属性列表，找出哪些属性对 
应表示，而哪些属性对应内容或元数据。 






表•子 • 




<iframe id="map" width= ,, 300" height="300 M frameborder="0" scrolling="no" 
marginheight =,, 0 M marginwidth='*0" src =,, http: / /maps.google.com. .. "></iframe> 


象孑 表子 

所有这些表示属性都应该放在 CSS *。 

祥式/厲性 紀对 

有些属性与相应的 CSS «. 同名。不用太费劲就能找到 CSS 
中的宽度和高度属性 （ width 和 height ) 。另外一些属性，如 
frameborder , 就不那么明显了.幸运的是，总的来讲 CSS « 性 
还是相当简单的。 



• v ^V«avvct 


黍 ti . 


<iframe 
id="map” 


时在 wcap ^ 

C ^ s 坭則. 


把这些规则增加到 
layout . css 。 


width="300 f, - 

height="300" - 

frameborder="0" 
scrolling="no n — 
marginheight= ,, 0" 
ma r g i n w i dt h= " 0 ’’ 

src='*http: / /maps. 
google.com... n > 
</iframe> 




-> j 


#map { 

width: 100% ; 
height: 100%; 
border:none; 
overflow : hidden; 
margin : 0; 

> 



学到的 . t 
的体柰教砭为石分盎 


\/ crfU>w 


-望隐 AM 耷鉍外的内窖. 
系； T 4 缯知涑鉍条它耷 
acrolUv^Q — "y^o 的技 
粟相《- 
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从 JavaScript 删除厲性 


既然已经由 CSS 来提供表示，下面修改我们的 JavaScript , 不 

再设置那些表示属性。删除之前找到的那些增加表示属性的 

代码行^ J ^ n v t , 


味达 ； U 的代琪 4 


<script type= w text/JavaScript w > 
var breakpoint = 481, 
id = 'mapcontainer *, 
viewportWidth = window.innerWidth; 
if (viewportWidth > breakpoint) { 

var mapElement = document.createElement(* iframe'); 

mapElement.id = 'map *; 

mapElement.width » 1 300 1 ; 

mapE 1 ernent.height- » ■* 300 1 r 

mapElement.f-rameborder » 1 O'; 

mapElement. sero 11 i-rtg—-■ -^-no 1 - r 

•iTi&irginhcight ^ • 0 • / 

mapElement.marginwidth « 1 0 1 ; 

mapElement.src = 1 http :// maps.google.com/maps? f=q& so 
urce=s__q&hl=en&geocode=&q=334+NW+llth+Ave,+Portland,+0 
R+97209&aq=&sll=37.0625,-95.677068&sspn=58.164117,80.3 
32031&vpsrc=0&ie=UTF8&hq=&hnear=334+NW+llth+Ave,+Portl 
and,+Oregon+97209&t=m&ll=45.525472,-122.68218&spn=0.01 
804,0.025749&z=14&output=embed'; 

document.getElementByld(id).insertBefore(mapElement, 
maplink); 

) 

</script> 




一试- 

保存 layout . css 和 ontap . html 。 在 Safari 中加载 On Tap Now 页面。 

如果想更方便，则可以使用 http :// hf - mw . eom / ch 2/ ex /6/ ontap . html 。 
地图看上去怎么样？ 
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地图的怪举动 


现在找到湎吒应淡毫无问越？ 


地图有点过干跋扈了，是不是？它几乎占据了整个左栏。它就像在 
高调地唱着“我是地图，我是地图”，以便引起你的注意。除非 
我们来驯服它，让它低调一点。 


如果把窗口变窄，就会了解为什么地图希望得到我们的关注。地图 
会挤压成一个细长条，直到最后完全不可用 • 

我们还是希 s 地图能缩放，不过需要对各个方向的缩放程度设置一 个. 8 

个界限。 \ 



0地图的 height 属性值太大了。 


将 height 设置为100%,这会使地图比页面上最高的 
图像还要长，下面把 height 设置为 400 px , 对它多 
加一些控制。 


t\ c^ss 現則中携加 
代紱 . 


height : 400px; 


O !«. 看呐，地图就像穿了紧身牛仔裤。 


窗口变窄时，地图会变得太细，大多数信息都将无法看 
到。我们需要设置一个最小宽度，使地图不会变成一个 
细竹竿。 


2 后 . layout.css ^ 
的拳 norp 规則 H d 样 


#map { 

width:100%; 

height:400px; 

border : none; 
overflow:hidden; 
margin:0; 

min-width: 200px; 
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义出现 M 橙重叠了 



我认为之所认让 i 什 awe 采用浚式设 if , 椋辜原 
©弒是褢涓除重鮝。现在我们0•轻拕《戍的表示 
展性放在 CSS 中？，不过澍芘8窗口变窄 时摊® 还 
是会覆籯唓潘标签 。 


将 iframe 表示飄性移到 CSS 中只是第一步。现在需 
要用全新的眼光考察我们的媒体査询。 

第1章中，我们使用媒体査询在宽度为480像素时切换 
布局。这个宽度是根据流行智能手机的宽度确定的。 

对干地图，有一点可以 确定： 要决定仵哪里应用媒体 
査询，首先需 要査看 页面的内容。 


tew 

..… MW :;' 
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利用你的内容 

让沟容成为你的白导 

使用480像素作为媒体査询的分界点存在一个问题。并 
不是所有手机都有相同的宽度。即使如今大多数手机确 
实宽度相同，谁能保证将来其他宽度（如540像素）不 
会成为最常见的宽度呢？ 

一种更好的方法是，对布局做修改时，让你的内容做向 
导。 


我们并不是要求你与内容联系，真正让它与你交谈。不 
过，如果调整了浏览器窗 n 的大小，有些地方看起来不 
太对劲时，则从内容可以了解到很多情况。 

可能图像变得太小，也可能分栏变得太窄。 

发生这些情况时，你就需要一个分界点了。然后可以调 
整媒体査询，修改这个分界点对应的表示。 
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淡拉伸浏览器？ 


需要适当安排我们的内容，为此要尽可能放大和缩小页面，同时观察 
布局何时会被破坏。 


不过，在此之前，我们需要有办法知道页面出问题时屏幕有多大。对 
此最容易的方法就是安装-个 bookmarklet ， 它会为你显示窗 (1 大小。 





在浏览器中安装 boolcmarldet 


前往 http :// bit . ly / window - resize ， 把标为 Window Size (窗门大小）的链接 
拖到你的书签工具栏上，就能创建 bookmarklet 0 单击 bookmarklet 将它激 



活。调整浏览器大小，观察浏览器窗口左上角的数卞变化。 

❻❻ ® Window Size t 


， H A 费 J?. + •*： mtr ,W 

m 58 Mobrf? rskm TOOK* ten,., wind 


7 T 


丰# 裎中 
• Size 本荃 


章在 Wt*^OW Stzc 






玎选： 安装 扩展包 


还有一个面向 Google Chrome 的扩展包，不 仅会显 示窗口大小，还会调整窗 
口的大小，使之与常用的屏*分辨率一致。这个扩展包可以在 http :// bit . ly / 
chrome-resizer 得到。 


Web Developer Toolkit ( http :// bit . ly / webdevtoolkit ) 会在私题栏中显示 M 面大 
小，同时提供另外一组有用的工具。这个工具包适用于 Firefox 和 Chrome 。 


your pencil 


在安装了 Window Size bookmarklet (或浏览器扩 展包） 的浏览器中加载 
On Tap Now 页面。激活 bookmarklet 。 调整浏览器大小《 


写出布局被破坏或者内容看起来很奇怪时的浏览器宽度。 


你现在的位璽 ► 


85 



动动笔答案 


-r^harpen your pencil 
、乂 Solution 


下面来分析调整浏览器大小时出现的几个情况 


6 f 0 f 系黄：嘈浴杉荃紧接«祕® „ 

大约610像素时，标签与地图挨上了。如果要创 
建一个新的分界点来解决这个问题，则需要在 
它们挨上之前完成。这说明，并不是使用610像 
素，而应该使用640像柰作为分界点， 




ISO〆 系棄： 庞大的杉莶。 

浏览器越来越宽时，啤酒标签会变 
得异乎寻常的庞大。从多大 开始算 
是过大呢？这是一个美学问题。对 
我们来说，浏览器宽度为1200 像素 
时这些标签就显得过大了。 


调整浏览器大小时你还发现其他问题了吗？你认为 
问题要多严重才有必要另外增加一个媒体查询来解 

决？ 
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分界点来帮杧 


总的说来，还不算太坏。只需要对 css 做几个小小的改 
动就能解决问题。 

收缩 无比晓 犬的蜱涌标签 

目前每一行有3个啤酒标签。页面变得更大时，每行就会 
留出4个啤酒标签的空间。 

为宽度超过1200像素 的窗口 创建一个媒体査询，将 Iff 面 
上一行的啤酒标签改为4个。 


•°* 与•去亊 o 之子 ± ZlOO <^ 素的？ 含货 {i 
个磕変， 


将笆含嚐浴核爸的 糾表诗 （ D 的宽 
/till #25^ . ii 含 在备一 Hi ： 硅蠆 
4 个核爸. 


@media screen and (min-width : 1201px) 

.taplist li { 
width: 25%; 


纪 ( i 安規射 坩加的 


很怕変为单栏 


即使啤酒标签没有与地图重叠，640像素时布局也 
会变得很拥挤。我们并不是增加一个新的分界点来 
解决这个重叠问题，可以把现在的媒体査询从4迎_^ 
像紊移至640像素。 

做这个改变会把布局转换为一个单栏布局，并隐藏 
地图。这还有一个附加的好处，可以对大于480像 
素的手机应用单栏布局。 


毽鬌属 芩変宽让密怿戏比例地臶.)..达！ 
垠常汜的漱 :去. 






<link rel="stylesheet" type='*text/css" href= M layout.css" 
media="all and min-width: 641px)"> 


■、， 


将 MpUa width tl B >6 


巧; flN / flScvipt ; 中的 


Ocript type=*'text/ 
javascript"> 

r var breakpoint = 641, 
</script> 


toys t 




/* Mobile/lower-resolution devi 
*/ 

@media screen and (max-width 


svices I J<0 , 

A't 

:640px) 
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简洁明快，而且是响应式的。这是一个全新的非凡海象 



我们的移动优先响式设 i + B 经大功告成 J f 




让 HTML 尽可能简单，调整 CSS 的顺序，使移动 版本婊 优先。 


[7 f 调整 CSS 背岽图像，对于每个图像只下载一个文件。确保适当地使 
用 display : none 0 

^ 对于不同屏幕分辨率，为<丨11^>标记提供不同的源文件。确保下载 


/大小适当的图像。 

0如果浏览器支持 Google Maps ， 而 E 文档足够宽能够放下地图时，則 


用 JavaScript 为奴面增加 Google Maps 。 
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tlieretare nQ 

Dumb Questipns 


| v ^) I 到底什么是视窗 ？ 

伋设拿一个纸板，在中间切出一 
个矩形。把这个矩形贴到你的益视器 
上，这样你只能看到 Web 页面上透过这 
个矩形的一部分。这就是 Web 页面的一 
个视窗。 

1^) ^那么 viewport < meta > 标记就是 
在告诉浏览器视窗的大小，是吗？ 

完全正确。默认地， iOS 将 
视窗设置为 980 诹素.如果你已经 
为较小的屏幕优化了页面，則设置 
<meta-viewport 〉 标记会让浏览器知道 
要相应地设置视窗。 


什么是分界点？ 

分界点只是描述分辫芈的一种有 
趣的说法，达到这今分辫牟时设计者 
会改变页面的布局。这通常通过媒体 
查珣检查来完成，查看页面是否窄于 
或宽于某个诹素数。 

1 杂的响应式设计可能有多个分界 
点，包括一些可能对布局全面修改的 
分界点，以及一些小的分界点 《只做 
一痊有针对性的调整来修正小的布局问 

題）. 

我不希望阻止人们放大页面，不 
过这个 iOS bug 实在很讨厌。有没有办 
法允许放大而且不破坏页面呢？ 

^ r 可以在这里找到解决这个问题 
的一个 JavaScript ， https :// gist . github . 
com /901295. 


r ^) r 为什么刚开始会与地图重叠 呢？ 

这是因为地图是一个不会随浏览 
器窗口縮放的元素。窗口很小时，浏 
览器不会把地图檐得更小，所以最后 
左栏会与右栏重叠。 

1 A :向地图增加 min - width 难道不会 
破坏响应式设计.这样会创建一个不 
随浏览器窗口缩放的元索吗？ 

理论上是这样。不过这里看来是 
一个合适的解决方案，因为我们修改了 
媒体查询来解决内容重叠的问題 D 另 
一种选择是使用媒体查询调整地图的大 
小和分栏的比例 . 


BULLET POINTS 

■ 为一个已有的桌面网站增加媒体查询后，在移动设 
备上可能这个网站看起来还不错，但这并不意味着 
它是移动优化的。 

■ 因为大多数移动浏览器不支持插件，能为移动 Web 
幵发人员提供帮助的工具很少》 

■ 使用一个代理服务器或者类似 Blaze Mobitest 的测试 
方案，可以帮助你了解一个移动浏览器具体下载了 
什么。 

■ HTTP 归档 （ HAR ) 文件和瀑布图是基本的性能工 
具。 

■ 移动优先响应式 Web 设计可以帮助优化 Web 页面， 
确保默认下载较小的资源。 


■ 移动优先 RWD 是渐进增强的 另一种 形式，使用屏幕 
大小来确定如何增强 Web 页面。 

■ 移动优先设计要求你关注真正重要的部分，相应地 
帮你从页面上去除不必要的东西。 

■ Internet Explorer 8及以下版本不支持媒体查询。条 
件注释可以作为一种解决办法. 

■ JavaScript 能提升媒体査询，检査屏幕大小，并在适 
当的情况下增加内容。 

■ 不要根据屏幕分辨率设计分界点，应当由内容指示 
达到哪些分辨率时需要修改布局。 
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3 单独的移动 网站 

參 伞 

伞 直面不太好的环境 




% 


响应式 Web 的远景固然美妙 


在这串.，每个网站都采用•种移动优先的方法巧妙构建，只有一个布局，可以 
应对各种设备和环境。嗯……真不错。不过，如果现实一点，考虑一些实际因 
素会怎么样呢？比如说，遗留的系统、老式的设备，另外还有可能受到顿客预 
算的限制。有些时候，如果实在不能把桌面和移动支持完美地结合在一起，是 
不是需要单独来建设？这一饫中，我们会介绍有关的细节问题，包括检测移动 
用户，支持那些老式手机，以及构建一个单独的移动网站。 
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动物关怀 


Creature Comforts 的现场代理处 

Creature Comforts International (动物关怀国际组织）是一家全球性 
非盈利组织，着力帮助自然灾害灾区里那些生病或受伤的动物，为 
受到灾害影响的农民和牧民提供支持。直至目前，这家机构的代理 
处均依赖话音通信或临时的抗震笔记本电脑来协调人员和补给。 
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代理处如何得到和分享他们熏要的 
信患？ 

Creature Comforts 并不是一家新成立的组织机构，它的前身早在20 
年前就已经成立了。如今，这家机构已经拥有大量内部基础设施， 
包括一个重要的“传统” Web 网站，这是基干一个财产内容管理系 
统 (Content Management System , CMS ) 构建的。 



对移劫 Web 的更犬 t 求 


Creature Comforts 的员工越来越发现，现场最可靠的（通常也是唯 
—可行的）连接渠道就是通过当地的蜂窝网络。地基互联网连接很 
难找到，不仅需要更多的地面设施，而且移动性也很有限 • 

Creature Comforts 需要一个移动网站，一个能够支持多种设备、可 
以使用多种不间连接的网站。 
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有时分开更合适 



有时为移动珙令创 
建―个单独的独豆 


嘈上去玎是一个大工我哳。炙是苓不 A 了.现在弑动手 
«€. 让代理处的 CMS 龙布更多移动 食好的 沟容，另外还翥值 
r 用一整嗱 应式设 计的东 35。 ^ 


Frank ： 我有一些坏消息。 Creature Comforts 没有太多预算，另外还 
涉及一些内部政策问题。而且，要想从原来那个財产 CMS 抽取出这个 
组织的管理和内容发布流程，可真要大费一番周折呢。我们还不能改 
动桌面网站，至少现在不能。 

Jim ： 这么说，我们的任务岂不是无法完成了？ 

Frank ： 那倒不是，不过可能需要做一点让步。 Creature Comforts 的 
网站很庞大，也很复杂，不过在这个组织看来，要针对移动设备优化 
网站，最至关重要的部分就是他们所谓的 "Comforts Logistics Portal " 
门户应用。这个 Web 应用允许代理处提供和接收更新信息，还可以协 
调曰程和供给。桌面网站的这•部分内容相当全面，有一些 API 可供 
我们使用。 


Jim ： 我不太明白。我们怎么能选择性地只改变网站的-部分呢？ 
Frank ： 在这里，我认为需要为移动用户开发-个单独的网站。 

Jim ： 听起来真乱。 

Frank ： 移动 Web 可能就是-个“脏活”。你知道的，我们要让派往 
世界各地的人使用这个移动网站， rfSil 还要让网站可靠地运行。另 
外，这些人并不全都拥有最新的智能手机。很多员工的设备只是一些 
捐赠的老式手机，而且在他们服务的地区，移动连接的状况往往不太 
好，最好情况下也只能断断续续地连接。我们需要一个简洁但功能完 
备的移动网站，能帮助这些人完成他们的工作。不过不能简单地把现 
有桌面网站的全部内容与我们真正需要的东西混杂在一起。 


害怕编程？ 不嫛太 担心。 

// l ^ clax 这里提到 rAfM 和 Web 应用，不过 
1 不会让你做任何具体的编程。这 
些编程工作都留给我们，你的任 
务就是 it 网站看起来漂亮些，在移动 Webh 更好 
用。 
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tlierejore nQ 

Dumb Questions 


内容管理系统 (Content Management System, 
CMS ) 用来做 什么？ 

¥ rWebCMS 是一个集编辑.发布和版权管理工具于一身 
的应用，用于创建和管理 Web 内容 n 有痊 CMS 功能相当全 
面，为快速开发 Web 应用提供了一个坏境[有时这也称为内 
容管理枢架，或 CMF (Content Management Framework } 】 • 

管理?4用户可能不熟患 HTML 标记或 Web 设计，不过利用 
CMS , 他们能轻松地创建和管理内容。 

幵源和商业领域都有一些 CMS ， 可能用你能想到的任 
何一种语言編写* 比如 WordPress 、 Drupal . DotNctNuke . 
Joomla ! 和 SharePoint 。 有时比较大或专业的组坎会创建自 
己的 CMS 软件. 

大多数 CMS 还会使用樓板系统或其他机制处理内容的发 
布，由于这个原因.如果想通过转换来支持移动设备会很 
困难，因为在很多情况下，内容会与表示层夹杂在一起. 


Creature Comforts 正是这种惰况，它的 CMS 是很多年前设 
计的，只有一组樸板。现在要从头开始重新建立系统对于 
这个机构来讲成本就太高了。 

1^1 # # 每一个 Web CMS 针对移动设备做适应性调整都很成 
问题吗？ 

现有的 CMS 系统实在太多了.其中一些•针对移动设备 
调整会比另外一痊容易,.当然，很多流行的 CMS 都存在内 
容、逻辑和表示混杂在一起的问題。 

很多 CMS 的开发群体和公司都在枳极行动，开发优化的后 
续版本，可以将内容犮布到不同类型的客户 4 SL 移动 Web 
世界里一些高瞻远曦的人正在重新考虑建立内容结构的方 
式，希望能更系统地处理内容（如应用数据），从而能在 
多个平台上更简单地实现其重用. 


API 特写 

API (应用编程接口）是幵发人员创建的有系统的、明确定义的接 
口，使不同的软件系统可以相互通信。 Twitter API 就是 Web 上一个 
很受欢迎的 API 例子。 Twitter API 定义了一组方法， Web 程序员可 
以使用这些方法获取和修改 Twittei •系统中的数据。 


耷 CMS 不 (?）• Creature 

的 API •:达节龙 技 
如表孑龙4 一起 ci 让我们 
的蜉化私多5 


Creature Comforts Web 应用小组编写了网站的一部分，允许代理 
处和管理人员管理分布在各地的不同小组人员和供给。作为这个 
代码开发一部分. Web 应用小组创建了一个 API, 可以用来获得和 
更新小组成员和物资的信息。 

这个 API 会返回结构化数据，移动 Web 幵发小组可以使用这些数据 
建立 Creature Comforts 网 站的一 个移动版本。 
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请求霪定向时要控制住 

让移动用户前往移动优化网站 

有时有必要为移动设备和桌面浏览器分別提供不同 
的网站。通常，你会希望用户只访问•个域（比 
如， www . example . com ) ，然后根据他们的设备自动 
地路由到适当的网站。 



web 萸蚤器 i * 的一个卿本检套！ 
入的沙东.當说硌定荅户 4 不 I 
4後用楫妫设备 




本香客 > 仍 ft 问蛋♦本 


承列褚器的网站 ., 




『 •example.com 
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导找移动用户 

要实现这种设置，也就是把移动设备 m 定向到移动优化 
网站（针对移动设备优化的网站）， Web 服务器需要知 
道进入的请求是否来自一个移动设备。 



器 盞移动的嚷？ 


我们要査看浏览器发送的 User-Agent 
HTTP 首部，试着确定用户使用的 ft 不 
ft 移动设备。 

对此还有一些其他的技术，不过通过 user - 
agent 检测是 -种相当常用的检测设备的 
服务器端方法。 

，技术 常称 ; ifj “user 峰沒，， 


user—agent 

扣当子者 
户帅 (在洚里鉍 
丧 Web 匆览縣）的身 


Hp ^ 0 每个方 伺的 


韌览粽鞒是—个唯 — 
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user-agent 嗅探 i 正式说明 


认识用户代理 

Web 浏览器（嗯.这也包括移动浏 览器） 发送一个 Web 贞面或资源请求时，会发送一 
个 User-Agent 首部作为 HTTP 请求的一部分。 

User-agent 串很早就被网站管理 R 用来（当然也包括滥用）识別（以及错误地识 别） 
浏览器。回想20世纪90年代那段一切都很混沌的日子， 数打万 用户都遭遇过奐名昭 
著的提示“该网站最好使用 Internet Explorer 浏览”（也可能是 Mozilla、Netscape 或 
者当时吏流行的某种浏览器），其万恶之源正是 user-agem 嗅探。 


GET /pretty.png HTTP/1.1 
Host: www.example.com 

Accept : text/html,application/xhtml+xml,application/xml 
Accept-Encoding : gzip,deflate,sdch 
Referer : http://www.example.com/foo 

User-Agent : Opera/9.64(Windows NT 5.1; U; en) Presto/2.1.1 



•'# ^ ii 



碲求 1 ? 郝 




HTTP« 求的简化结构 



user-agents 史分析 


如今， u Ser - age m 串的结构很让人奇怪，有时甚至是惯例，混乱和欺骗拼凑在•起形成 
的乱_匕八 ffi 的产物。关 T 如何写 user-agem 串从来没有人成功地给出过完洛的说明。所 


以你町能会看到 龙似 这样的 东西： 


Mozilla/5. 0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML, lik 
Gecko) Chrome/14.0.792.0 Safari/535.1 


ft .v4stfl 

土 cMYOv^t 14 ' 


为什么 Windows 上的 Chrome 用户代理会提到 Safari ? 什么是 KHTML , 另外它怎么“像” 
(like) Gecko? 就像你的阑尾，或者是鲸残余的小粗腿，这算是一种进化的遗留产物。 

“Mozilla 兼容性忐” （JL 例中的 MoziHa/5.0) 并+完善，不过如今几乎无处不在，尽 
管它本身不再釘什么实隙意义。之所以提到 MoziUa、KHTML、Gecko 或 WebKit， 实际 
上是用户代理以这种方式声明其布局引擎相当于或者“优 F” 这些浏览器。写这本书 
时，移动设备上所有基 TWebKit 的浏览器（除了 Android ) 郎会在其 user-agent 串屮提 
到 “Safari” （Apple 公司原来基丁 KHTML 开发了 WebKit) 。 
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_用户代理方式特 S 

下面来深人分析一些具体的 user - agent 串。 


widows vUtdMozilla/5.0 (Windows NT 6.0) AppleWebKit/535.1 (KHTML, 
irfjc^rokvtc like Gecko) Chrome/14.0.792.0 Safari/535.1 



Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; 
Trident/3.1; IEMobile/7.0; SAMSUNG; SGH-i917) 



C£ (i^vUdows. T^ 0 kc 7 的 
4 机 . • 


I ^3JOO CRoUO,. 



BlackBerry9700/5.0.0.442 Profile/MIDP-2.1 Configuration/CLDC-1.1 
VendorID/612 


分析组成 



不 (2 Ci 4 7 必 f 


你现在的位置 ► 


99 










我的作用是什么？ 


♦ 秦 ▼•孓 費费备《轚， 

+ 



你 d 经见过-些分解的 user-agent 串。现在试试看，把从以上 user-agent 串中抽取的各 
个片段与相应的作用连线。 


Fresto/2.1.1 

操作系统、平台和版本 

Apple We^KJt/534.1+ 

历史/兼容标志 

WlnJpWi r47~5-l 

浏览器名和版本 


布局引擎 

V©v?ilpn/6.0.0.246 

历史/兼容标志 

KHTML. like Gecko 

布局引擎 

Opevq/V.6 彳 

浏览器版本 


荅*见*102页。 
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用户 代理： 魔鬼蛋 



«. 差不多吧 9 

如果在一个聚集着 Web 开发人员的房间里大声说 “ user - agent 喚 
探”，别人肯定会怪异地看着你，你会遭到奚落，甚至有些批 
评还会很 尖说。 


user - agent 嗅探把很多开发人员都引人歧途。我们已经看 
到， user - agent 串会多么复杂，另外， user - agent 欺骗也很常见， 
这是指用户（有意或无意地）把浏览器配罝为发送一个不同的 
UA 首部。而且如今有太多太多不同的 UA ， 每一天还有更多新 
UA 进入市场。 


通过在服务器上嗅探用户代理来检测移动浏览器，这无疑是一 
种不高雅、不正确的行为。不过，有时这是完成这个工作的最 
佳（也是最原始的）工具。 


^0 

想想看尽管 user - agent 嗅探不太好，为什么有时却又 
是必要的呢？ 


你现在的位置 ► 


101 


练习答案 




达是什么浏览器？ 


是+是对这个练习里用到的示例 user - agem 串（第100 页〉 
很好奇？下面向你完全解密，给出它们来自哪些客户应 
用： 

Droid Eris ( 也叫作 HTC Desire) Android 手机，运 
行 Android 2.1 浏览器 a 

Opera 9, 运行在 Windows XPl. 

0 黑莓 9800 (Torch), 运行 BlackBerry OS 6 浏览器 a 


把第100页上的黑莓 Torch (OS 6) UA 与第99页上的黑 
莓 Bold ( OS 5) UA 做个比较。是不是不一样？对于 OS 
6,黑莓浏览器使用 WebKit 布局引擎，它们的 UA 串 
看起来与其他 WebKit 浏览器更相似。 



并不是所有 user - agent 串 
都遵循一致的模式。 

有些 user - agent 串会史合理。 
用户代理并不都有同样的组 
成部分，有些完全是特立独行。大多数 
都会遵循一些基本模式，不过不要过于 
依赖这一点。别担心！我们有一些很好 
的工具来对付它们（起码是大多数）。 
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I®):第99页上 user-agent 串中你没 
有解释的那些部分有什么用呢？ en-us 
是什么意思？ U 又是什么意思？ 

答： “ en - us ” 是语言信息，表示浏 
見器和界面元素是为美国英语本地化 
的 。 “ U ” 指示浏 莧器有 “强”安全 
性（与不同，这表示“弱”安全 
性， “ N ” 則表示根本不安全）•要 
分析 user - agent 串中类似这样的部分， 
可以访问一个很有用的 网站： WWW. 
useragentstring.com v 

是不是现有的每一个构建.发 
布.版本.平台.设备和开发商都有 
一个不同的用户代理？ 

确实如此。 

r»i I除了浏览器还有其他应用发送 
User-Agent 首部吗？ 

向 Web 服务器发出请求的很多其 
他类型的应用也会发送 user - agent 首部， 
这些应用包括（但不仅 限于） 搜索 《I 
擎、极虫工具和各种 Internet 机器人 （ 
包括善意和恶意）.有时 Web 服务器曰 
志会捕获到不正常地访问网站的有关 
user - agent 信息，如构建到某个笔记桌 
面应用中的一个 Web 阅读器，或者是一 
个 Web 书签工具，也可能是一个监控 
服务 ping 连接到一个网站确保它可以 
操作。 

R I为什么人们要“欺骗”浏览器的 
用户代理？ 

^ I 为什么有人会故意让他们的浏 


tliere tore no 

Dumb QuestiQns 

見器替他们“揀说”，你是这个意思 
吗？这有很多原因。其中有两个常见 
的动因，一是因为隐私，二是对莱个 
特定体验的需求。有些用户不希望别 
人了解他们使用哪个浏見器的有关信 
息.还有一些情况下，一个用户可能 
希望尝试以莱种特定的方式查看 Web 
内容。很多移动浏览器提供的“桌面 
馍式”就是这方面一个流行的 例子。 
如果用户打开这种樓式，則通常（有 
时在不知道的情 况下） 会导致洌見器 
犮送一个不同的 user - agenl 首部，让 
它看起来更诹是一个桌面浏覓器。有 
时这会妥善地处理，不会有什么问 
題 ， Windows Phone 7桌面糢式用户代 
理就很容易识别。不过并不总是 如此. 
可以看看移动洌览器 Skyfire 的一个 
Android 版本在桌面樸式时发送的 user - 
agent 串： 

Mozilla/5.0 (Macintosh; U; 
Intel Mac OS X 10 _ 5 _ 7; 
en-us) AppleWebKit/530.17 
(KHTML, like Gecko) 
Version/4.0 Safari/530.17 

这看起来与桌面 OS X Safari 实在太相 
似了，这是因为这个用户代理 确实艽 
全等同于桌面 Safari 的一个用户代理。 

(^) ^不过如果有人在把他的移动浏览 
器伪装成桌面浏览器时遇到麻烦，我 
们不该尊重他的愿望，为他提供一种 
桌面体验吗？ 

这是一个蛛手的哲学问題，我们 
很乐意回答 1 •是 ”，填补与响应式设 
计之间的空白（也就是追应坏境，而 
不论洌 t 器声称自己是谏，前提是洌 
見器足够现代.可以支持媒体査询之 


类的特性） • 关于用户是否知道他们 
在做 什么和 没有做 什么， 还有些馍糊 
的灰色地带，不过，嘿，就我们而言， 
你应该知道你要呰 什么， 对于这一点， 
开发人员之间有很多分歧。这个诂題 
有些沉重了，轻松点吧_> 

你完全没有提到 UAProf 。 

¥:很多移动设备发出请求时会发 
送 UAProf (用户代理阃档， User - 
Agent Profile ) 首部，通常（但 
不总是）作为 x - wap - profile 请求 I 
部。 UAProf 规范为移动手持设备制 
造商提供了一种提供设备相关信息的 
方法。通常会在请求首部中提供指向 
UAProf 位罝的链接。 

听上去很不错，不过遗憾的是，并不 
是所有设备和浏览器都发送 UAProf 首 
部。而且很大一部分指向 UAProf 的链 
接都是不合法的。另外，对于 UAProf 
文件本身中数据的数量和质量也存在 
不一致。 

1^) .*0 K , 这么说来，有如此众多的 
用户代理，而且 UAProf 还不太可靠， 
这可真不妙。不过你说有一种明智. 
合理的方法可以完成基于用户代理的 
检测，是吗？ 

我们会在第5幸了解一些组织和 
项目，它们的存在就是为了跟踪用户 
代理，建立关于用户代理的元数据以 
及类似 UAProf 等其他数据源的数据库。 
剎那时，我们会力求简单.使用一个 
基本的服务器端脚本来查找具备移动 
測览器用户代理主要特点的 user-agent 


你现在的位置 ► 
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user-agent 嗅探并不完全不好 


实活 实说： 大多数 主要网 站郐有一个 
单独的移动 R 蛣 

世界上最大的网站大多都有一个单独的移动网站，而且其中大多数都使 
用某种形式的 user-agent 嗅探来完成路由。如果 user-agent 嗅探如此不堪， 
那么为什么还会出现这种情况？可见 user-agent 方法肯定有它的好处。 

服务*鐫叟 t 然 …… 

把进人的信息流 m 定向到一个移动网站更适合在服务器端完成，这样吏 
自然。如果把移动请求发送到一个单独的网站（对于 Creature Comforts 就 
需要这么做），則最好是在内容发送到客户端之前就做出决定。 

. 徂 user - agent 蓄鄯是最好的线柰 

user-agent 首部尽管不算完美，但这是服务器关干请求浏览器所掌握的 
最直接也最可靠的线索。还有一些其他 HTTP 请求首部会提供客户“移 
动性”的提示，不过与这个让人喜忧参半的 user-agent 首部相比，那些 
HTTP 请示首部都没有这么普遍。在一大堆+算完美的选择中，它算足敁 
佳选择了。另外，尽管我们花了很多笔墨指出 user-agent 嗅探在哪些方面 
可能有 H 题（嘿，像是瘢鬼代言 人）， 但大多数情况下它还是能正常工 
作，特別是以可靠的方式使用时它会是不错的选择。 
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单独的移动网站 


如梁你 真正想 要的是重定向 



难道达个 脚芩不 til 在 
Creature Comforts 现布的 （ A ®) Web ® 务 
器上运行鳴？达样它才 能检测 稃动洌踅》 
捭拕它们重定向到我们的桴动《蛄.不是 
玛 7 我认为供本不能对 现笮的 R 站激任 

'■—-V ««•«. 夕 — 〆 


问得好。幸运的是， Frank 和 Jim 能与 
Creature ComfortsW_T 部门合作。 

我们能够在它现有的 Web 服务器上放置一个 
简申•的 E 定向脚本 。 Creature Comforts 的 Web 
小组会把这个移动检测脚本放在每个页面最 
上而，这样移动信息流就能得到重定向。 


现 ft 来快速访问 www . detectmobilebrowsers . com * 
在这黾你会发现一个免费的、简单的移动检测 
脚本。我们希望你能找到最新版本，所以现在 
就去吧！ 一定要 F 栽 PHP 版本。 


科 P 5 龙 PHT> 


你现在的位置 > 
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驯服脚本 


着一浓脚本 


<?php ❶ 

.$useragent=$ SERVER【'HTTP USER AGENT*]; 

▲ — ~ - 

if(preg 一 match( _ /android Iavantgo|blackberry|blazer|compalIelaine!fennecIhiptop|iem 

obileI ip(hone Iod)I iris I kindle Ilge ImaemoImidp Immp!opera m(obi in)iI palm( os)?Iphon 

e|p(ixiI re)\/IpluckerI pocket IpspIsymbian|treoIup\.(browser I link)Ivodafone!wapiwi 

ndows (ce|phone) Ixda|xiino/i' , $useragent)I I preg_match('/1207|6310 I 6590|3gso|4thp 

I 50[1-6]iI 770s 1802s I a waI abac Iac(er|oo|s\-)|ai(koIrn)|al<av|ca|co) Iamoi|an(ex|ny 

Iyw)|aptu|ar(ch|go)I as(teI us)|attw|au(di|\-m|r |s )Iavan|be(ck 1111 nq)|bi(lb|rd)I 

bl(acIaz)|br(elv)w|bumbIbw\-(nIu)Ic55\/|capiIccwaIcdm\-1 cell Ichtm|cldc Icmd\-1co( 

mpInd) I craw I da(it 1111ng}|dbteIdc\-sIdevi|dicaIdmobldo(cIp)oIds(12 I\-d)lei(49|ai) 

|em(12|ul) Ier(icIkO)Iesl 8 1ez([4-7]0 I os IwaIze)I fete Ifly(\-|_)|gl u|g560|gene Igf\~ 

51g\-moI go(\.wIod)Igr(adlun)|haieIheitIhd\-(m|p11) |hei\-|hi(pt|ta)|hp( i|ip)|hs\- 

clht(c(\-I |_|aIglplsIt)Itp)|hu(aw|tc)|i\-(20Igolma)|i230Iiac( |\-I\/)|ibrolidea| 

igOlIikomlimlk|innoIipaqliris Ija(t|v)a Ijbro|jemuI jigs|kddiIkeji|kgt( |\/)|klon|kpt 

Ikwc\-Ikyo(cIk)|le(no|xi)Ilg( gl\/(k |1 |u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|ml\- 

w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rcIri)|mi( 08 |oaIts)Immeflmo( 

01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|pl|v )|mwbpImywaInlO[0-2]|n20[2-3 】 |n30(0|2 

)In50 (0 12 I 5)In7(0(0 11)110) |ne <(c|m)\-|on ItfIwfIwgIwt)Inok(6 Ii) |nzph|o2im|op(ti 

Iwv) IoranIowgl|p800Ipan(a|d|t)Ipdxg|pg(13 丨 \-([ 1 - 8 J Ic)) IphilIpire|pl(ay|uc)|pn\- 

2|po(ck|rt|se)|proxIpsioIpt\-g|qa\-a|qc(07 1 12121 1 32 I 60|\-[2-7]|i\-)|qtek|r380Ir60 

0 Iraks|rim9|ro(ve|zo)Is55\/Isa(geIma|mm|ms Iny|va) |sc(01|h\-|oo|p\-)|sdk\/|se <c(\- 

I 0 11)I 47ImcInd|ri)Isgh\-1shar|sie(\-|m)Isk\-0|si(451 id)|sm(al|ar|b3|it115)|so(f 
tiny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2<18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\- 
|tel(i|m)Itim\-|t\-moI to(pi|sh) |ts(70|m\-|m3|m5)|tx\-91up(\.bIglI si)lutst|v40 
0 Iv750Iveri|vi(rg|te) |vk <40 I 5 【 0-3]I\-v) |vm40|vodaIvulc|vx(52|53 I 60|61170 I 80 I 8 

II 83 I 85 I 98)Iw3c(\-1 ) IwebcI whit Iwi(g |ncInw) |wmlb|wonuIx700|xda(\-|2|g)|yas\- 
I your I zeto I zte Wi •, substr ($useragent, 0,4))) 

header('Location : http://detectmobilebrowser.com/mobile'); 


0 


c 


• i 杖袅螂本，你下載的 
脚枣9 钧着工 • I 耷4 f 
不$_| • —样（9挝£一 
个 t 扣的鈑本）.不过 
应作€走似的、 


detectmobilebrowser.php.txt 

目舱碰 
不用花太多功夫就能把它驯服。 

第一次在你喜欢的文本编辑器打开 
detectmobilebrowser . php 时，你可能 
会发现它看上去有点……可怕。不过，不用害怕，我 
们会带你了解它是如何工作的，实际上，要让它起作 
用，你要做的只是几个小小的改动，我们会告诉你怎 
么做。 



// "Relax 



将这个文件重命名 
为 redirect.php， 
再把它保存到 
chapter3 文件 夹中。 
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单独的移动网站 


迖个瞄本如何工作？ 

这个脚本会检査 user - agent 串，并确定它看 h 去是不是 
移动浏览器，如果是就进行重定向。共分3个步骤完 
成： 


0获取谓求浏览器的 user - agent 串。 

在 PHP 中，可以从全局变量 

$ _ SERVER!'HTTP _ USER _ AGENT' 】访问得至 ， j 。 


o 


使用一些精心建立的正则表达式。 -- 

这里有两个正则表达式.它们都会分析 user - agent 串，并査 
看是否与已知的移动值匹配。你可能会发现一些明显的片段，^ 

如 “ hiptop ” 或 “ symbian ” 。不过还有一些不那么滴楚的部 ^ 

分，这些正则表达式是那些通晓移动世界的人幵发的！ 


0如果浏览器的 user - agent 串与任何一个正则表达式匹配，就完成 
重定向。 


如果浏览器的 user - agent 串与任何一个正则表达式匹配，这个脚 
本会用指定的位置设置一个 Location 首部，重定向移动信息流。 


饮认他.桴幼 <1 1 浚衾 t 定免刊 www.rtctcct ⑽ 
. an 戋変达个设燃 



碥保你的工作环璜碥实适含 

继续之前先要做一些安全检査！下一节 
(以及本书很多其他部分）要求你有一个 
能正常 r 作的 web 服务器，而 a 允许使 
用 PHP 。 这可以是你自己的计算机，或 
者可以找一个托管提供商，我们可不挑 
剔。不过，如果你还没有一个适合的工 
作环境，现在就请翻到附录 ii , 找到建立 
工作环境的有关信息。 


你现在的位置 ► 
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调整你的重定向脚本 


建交一个移动模鉍 R 站 

Jim ： 11, Frank, 你怎么逮立 Creature Comforts 的移动网站呢？ 

Frank： 我想无非是编写代码使用他们的 API, 同时完成移动设计，所以我 
已经飞快地建立了一些简单的模拟网站，我们可以从它们起步。一次解决一 
个问题，好吗？ 

Jim： 听上去不错。你使用响应式内容了吗？ 

Frank: 嗯，差不多吧。我使用了比例宽度，不过我发现要处理一些年代 
比较¥•的手机，它们可能不能理解媒体査询和帑助实现响应式设计的其他 
特性 。 我得到了当前 Agent Portal 登录页的桌面 HTML 模板，进行简化，并 
電构 CSS 做到移动友好。我用到了一些示例数据，这样现在躭不用相.心功 
能、 API 等其他方面广。 

Jim： 移动设备枪测和重定向脚本呢？怎么测试它们呢？ 

Frank :嗯， 听说我们最后会把它放在 Creature Comforts 的服务器上，别人 
会从要提供的各个页面调用这个脚本。不过，对现在来说，我们希望在本 
地测忒，检査重定向的表现如何。 

对移动重定向脚本的几处妗改 

要对这个重定向脚本做几处定制修改，来了解它的实际使用。我们想 
增加一行新代码，定义如果脚本看到一个移动用户会重定向到哪个位 
茛。 PHP $ _ SERVER[、HTTP _ HOST f ] 变量是运行这个脚本的 Web 主 
机的名字。 -- 

我们还希望修改发送 Location 响应首部的那行代码，想把移动佶息流 (io^erA^t) 

重定向到我们的移动模拟网站，而不是 www.detectmobilebrowser.com httpow 6 (由哚务器备纪 ）^ 

网站。 

<?php 

$useragent « $_SERVER['HTTP 一 USER_AGENT • 】； 

$mobil«_locati.on = • http : // ' . $_SERVER 【 • HTTP—HOST • ] • • /index 一 mobile . html 

if(pregmatch(...)) 

header(* Location : ' • $mobile location); 



vv 找 i 机 ⑼如 “ WWW, ⑽， 匕如队" 
成寺如 瞿伐沒 t3 的 ffu 打 i; q 以 
是 •LowiUiost’. 琏 u io . o . o .^ 残辛•老如 
爱的《字）— 
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redirect.php 


单独的移动网站 


一 w —■试 


将夹护岣 I.) 0将 Chapter3 文件夹的@复制到 Web 服务器的根目录。 



如果你不希望把这些文件放在文档根目录中，没问题。只是要确保更新 
代码.修改定义 $ mobile _ location 的那行代码中的路径。 


完成第108页上对重定向脚本的修改。 

再在文本编辑器中打开这个重定向脚本（如果还未打开）。在脚本中完 


这些只是襆拟的。 

这一章要使用的移动模拟网站只是模 
拟的。它们使用示例数据来表现“插 


人”真实数据 API 时网站会是什么样 


了、 这串.表示的数据是虚拟的，很多链接并不起作用。 


不要 m 心! 


你现在的位置 ► 
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opera mini 

复杂谚棄……的特别怕逄 




Opera Mini, 是吗？ 

如今，黑莓 WebKit 浏览器和 iOS Safari 之类的顶 
尖浏览器笼軍在巨大的光环之下.不过不要低 
估 Opera Mini ! Opera Mini 和 Opera Mobile 是姊 
妹浏览器，它们是全世界最流行的移动 Web 浏 
览器。 


例如，2011年上半年， Opera 就报告称有超过 1.1 
亿用户。这相当于印度移动 Web 流 ft 的一 节以 
匕而超过了尼口利亚移动 Web 流竜:的90%。 

Opera Mini 在连接速度很慢或者数据很昂贵或受 
限的地方尤其流行。 


Opera Mini 实际上是一个移动转码器。这表示， 

用户在 Opera Mini 中访问一个 Web 贞面时，请求 巧 t 猝备种不同 
会通过 Opera 的服务器路由传送，在这里针对移 （j 常 4 蛟噠叇）的 4 机的以 
动设备压缩并优化 Web 页面和资源。这个优化 
意味着最后向设备传送的字节会更少，从而得 
到一种更快的体验（通常也更便宜）， 

mLW 不只甚4 总钱中 世孓邙 f.) 
它奋襄 ® 知纹硎的劝 社夺 机中 
也忙•去淹 fj 
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单独的移动网站 



f^^rpen your pencil 


下面来看这个移动模拟网站在 Opera Mini 4.2 模拟器中的表现。使用 Web 嵌入式 Opera Mini 
横拟器查看 http://hf-mw.eom/ch3/ex/l /模拟网站. 


看看哪里不同（或者，唉，看看哪里出问题），记录下来。在 Opera Mini 棰拟器和 iPhone 
或 Android 模拟器（第 109 页）中分别査看这个模拟网站，你能找到二者之间至少 4 处不同 
吗？ 


❶ 


O 


O 


o 
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为什么非得在 http :// hf - mw.com 上査看这个例子呢？ 
为什么不能用我自己的版本？ 

Opera Mini 是一个代理浏見器 a 这说明，所有 Web 信 
息流都会通过一个 OperaJlll 务器路由传送。所以.这个示例 
模拟网站和其他代码必须托管到 Opera 服务器能到达的某个 
地方。 


如果你在你自己的计算机上完成工作，則可能会有一个对 
整个亙联 H 不可見的 IP 地址（所谓的内部 1 P 地址，只对你 
连接的那个网络可見> 

如果你在一个托管服务器上工作，或者把 Creature Comforts 
网站放在一个外部可以访问的 Web 服务器上，那么当然可 
以使用你自己的版本。 


练习答案 


c^Jharpen your pencil 
、、 Solution 

^J^Creaiur^CormorS 
Agent Portal I 

1 


Welcome bick , D ». Je ; 

Evans 

Fehroar> 4 Loading suppliff and 
conucting personrwl 10 with 

flood event in Bangladesh. t 

HQ tf you are currently 
untch«duled and «v4<Uble to assist 

, O 

Messaq^iJ Supply Reqiie><1 

4 I < '• 

7 P0R8 

， ll.l ..... k 

傘 


模拟网站在 Opera Mini 4.2 中看上去大不相同，是不是？下面来看有所不同或者 
有些奇怪的几个地方。我们发现了5个有问题的地方。 


看 I ：去很值: 何权 赵无最 扣碑式 


1H 33 . .一外 

m , ^ 


• ii 个问肢垠突出 


•: a 兔作. 兮垮.夸 K f 哼.心. ,^ » .+殊 

有*正 斜砵. IE 休 ±本也不 4相体。 


O .洋节！手廣 . m …? 

矩衫。 


如蓽你6錢存 

i . Pkov'-fi 3^ Ai ^ roid 

洽你 銥外知分 1 


内容破切绅.茱£也不常涑劫。 


& ；«s s ( i ^) 7. .寻 •... 竣今 

辦奄穋劫设备 i ： 邾 I 绝的 左鑌 进免的 。 


5 jw - 


8tUV 


2 aac 


3 oef 

mrrm 

9«nnrz 
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单独的移动网站 


捋不是所有手机都是智能手机……完全不是达样 

Creature Comforts 开展工作的很多国家都把 智能手 机看作是很稀缺的东 
西。在印度，2011年智能手机的销售 S 还不到所售手机总董的6%。你 
岈能认为这没什么……是吗？ 

印度到底冇多少鄯手机？ 


到2011年8月，印度有超过 8.5 亿移动手机客户。这使印度成为移动手机 
总数仅次干中国的第二大国。 


尽管*能手机在印度还很少见，但 ft 移动手机甚至比马桶还常见! 



功能手机超越智能手机的情况并不仅仅出现在斷兴市场。 

实际上，直到最近美国的智能手机销售置才超过了功能手机。 
可能到2012年的某个时间，智能手机会最终代表美国的大多 
数手机。大多数欧洲国家也是这样。 

看到智能手机爆炸式增长的报告时，一定要记住，即使有这 
样的增长，替换掉所有那些老手机仍然有待时日。 

嚅，功能手机也浚笮邡么轉 


当然，它们的浏览器很老，很奇怪，而且通常连接状况不太 
好，这让我们很头疼，不过，功能手机确实让世界各国的很 
多人生活发生了巨大改变。 


如果你想了解某个_$大创新，則可以到有新兴市场的发展中 
国家旅游，观察他们如何使用移动手机来完成从农业到金融 
业的一切事务。 


对干很多人来说，手机并不只是一个口袋大小，轻巧可爱的 
现代计算机。它是他们与世界联系的主要连接通道。 


你现在的位置 ► 


113 





认识) chtml-mp 


力求 基本： 认识 XHTMlrMP 

再来分析 index_mobile. hlml ,你会看到这个模拟网站目前使用 
了这个 DOCTYPE 声明： 


<! DOCTYPE html> | 

这是 HTML5 的 DOCTYPE, 在这个现代世界里，对丁•健壮 
的网站和 Web 应用来说，这是一个非常棒、很有吸引力的选 
择，不过如果我们想访问和支持 Creature Comforts 员工使用的 
那些移动设备，这个 DOCTYPE 就不一定正确了。现在来为 
你介绍我们的新 朋友： XHTML 移动简档 (XHTML Mobile 
Profile, XHTML-MP ) 。 

XHTML - MP 是专门为 支持中 级和功能手机以及一些二流 Web 
浏览器开发的一种 XHTML 。 实际上，从它出现到现在已经 
好儿年/,不过由于它那个更有魅力、 更年轻 的兄弟 HTML 5 
的飞速成长， XHTML - MP 越来越被大家所忽视。但是对于像 
Creature Comforts 移动网站这样的项目，它还是很有用的。 


NHTM 厶移动简 
挡丁 M 厶 Mobile 
Profile) 長你 3 
斛并喜褒的养亩 
( KKHV* 厶的—个孑笫。 
适是 HTM 厶的—个简化 
豚本，珙计为在者种 
>词的移动韌览粽上 
鞒鲜很势地工作。很 
多移动韌览獠鞒抜伊了 
?CH 丁 M 厶 一 MP 失持。 



4 - 


下面把模拟网页转换为一个 XHTML-MP 文档。编辑 index_mobNe.html 文件, 
把 HTML5 DOCTYPE (文件最上面 一行） 替换为下面这 两行： 


♦ 


<?xml version="1.0" encoding= ，， UTF-8" ?> 

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" 
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobilel2.dtd"> 

_^_ 


命 




j 泉的在 XHTML-MP ±.0.9k 



index mobile.h< 


巧泮. 戧扣迮箣否砝到行".本來 
Ci 砝实行. © 不过茗铋太 •). 
第二 行代茲 乇法 杏一朽丄*宅含 S 
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为付么我们要用迖个 )0 东西？ 



我承认，表面看来，使用 XHTML - MP 磽实看起来很 

让人沮丧…… 

它不支持我们在 HTML 中很喜欢使用的一些特性，而 
且现 代手机 已经越来越多地支持（或至少 接受） 
HTML 5 标记。 


不过，修改了 DOCTYPE 之后确实发生了一些变 
化。 

如果在 Opera Mini 4.2 模拟器中加载 http :// hf - mw . com / 
ch 3/ ex /2, 你就会看到惊人的变化。显然使用 XHTML - 
MP 作为我们的 DOCTYPE 改变了浏览器的行为方式！ 

内容不再超越页 ffi 边界。相反，按钮和浮动元素都在 
页面宽度范围内。 


原来是 这样： Opera Mini 把 HTML 5 DOCTYPE 当作是 
一个“提示”，看到这个提示就会认为要表现得更像一 
个桌面浏览器。这说明，如果布局中有基 f 百分比的 
宽度，比如响应式布局，就可■能不会按我们预期的那 


样工作。 



我们的任务不会就此结 束：不 
能只是修改 DOCTYPE 就认为 
大功吿成。 

我们已经把 DOCTYPE 


修改为 XHTML - MP ， 不过这并不表示 标记确 
实是合法的 XHTML - MP 标记。我们还需要对 
代码做一些柊改，让 它成为 真正的 XHTML - 
MP 。 



璆. 罨妁'现迮内容史弗 
嚯妨喊3矛4 属攀丄 •了 
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移动 DOCTYPE 的好处 


XHTMlrMP 力求简单 

尽管不会每分每秒都有惊喜出现，不过使用一个面向移动的 
DOCTYPE 对我们确实有帮助， 因为： 

0可以确保很多老式移动浏览器也提供支持。 

尽管大多数移动浏览器不会一遇到 HTML 5 文档就“完蛋”，但这些老式浏览器 
确实有可能。而且 HTML 5 中支持的一些特性在大多数老式手机上都不起作用。 


0可以提醒我们潜在的移动圈套，让我们保持清醯。 

如果一个特性在 XHTML - MP 中未得到支持，则肯定是有理由的。使用 XHTML-MP 
并保持在其限定范围内，这样可以避免我们贸然进入危险领地。移动优先 RWD 
会让我们重点关注约束、简洁性和最关键的任务，类似地， XHTML - MP 会提供一 
个框架，在这个框架内可以创建 一个能 得到广泛支持的移动网站。 


tlieret^re no 

Dumb Questions 


19, § 显然我失忆了。什么是 DOCTYPE 呢？ 

DOCTYPE (更正式的说法是文档类型 声明} 是 
放在 SGML 和 XML 文档最前面的一小段文本，通知客 
户（也就是洌览器）要根据哪个 DTD 执行这个文档， 

太多缩略语了。 SGML 和 XML 文档？ DTD ? 这 
都是些什么？ 

HTML 从 SGML (标准通用标记谱言 ， Standard 
Generalized Markup Language ) 发展而来， XHTML 則 
是一种 XML (所以与 HTML 相比， XHTML 结构更严 
格），因此这二者都支持 DOCTYPE 。 

文档类型声明 （ DTD ) 是一些形式化定义，栺出哪 
些元素（标记、羼性等）是尤许的，另外在其描述 
的文档类型中这些元素可以放在哪里.每个 HTML 和 
XHTML 规范都有自己的 DTD 。 

正常情况下，如果为一个文档关联其指定 DTD ， 提供 
显示的客户端就能根据这个 DTD 验证文档。但在实际 
的 Web 浏 JL 器中，不会发生这种情况， Web 浏見器从 


来不会真正根抽 DTD 验证文档. 

| V ^) 那么 DOCTYPE 还有什么意义呢？为什么浏览器 
还一直需要 DOCTYPE 呢？ 

浏見器会对 DOCTYPE 完成一种 w * 臭探”（与之 
前的 user-agent •臭探没有太大不 同）. 尽管它们不会正 
式验证文档，仨是会把 DOCTYPE 作为一个提示， 了解 
将采用哪种“樸式”，以及如何显示内容。 

应该还记得前面的 Opera Mini 例子吧？把 DOCTYPE 从 
HTML 5 改为 XHTML-MP (或者 XHTML - Basic ) 会让 
布局樓式改变，这就是 DOCTYPE 作为提示的一个很好 
的例子， 

其他浏見器使用 DOCTYPE 来确定是以“标准” 
( standards ) 樓式还是以“淡杂” ( quirks ) 糢式丑示 
内容，“混杂”模式是一种向后表容，容忍度史高的 
模式。 

对于 HTML 5, 洌見器具体查看 DTD 的所有要求都会去 
除，正是因为这个原因，现在的声明相当简短.只是 
<!DOCTYPE html > (而不再包括一个 DTD 的 URL ) • 
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XH 丁 ML - MP 闪亮登场 

本周 访谈： 

为什么要用 XHTML-MP? 


坏脾气的移动 Web 开发人员（以下简称 GMWD) : 

XHTML-MP, 你可有把年纪了。什么时候你能买 
下大农场养老，或者把它卖给 HTML5? 

XHTML-MP 1.2： 我还没死呢！有些人以为我已经行 
将就木了，不过我吋是个有用的老家伙。我能让那些 
老式移动浏览器继续发挥作用。你可以信赖我，我能 
帮你摆脱困境。 

GMWD： 你能帮我摆脱哪种困境？ 


XHTML-MP 1.2： 我们整个 XHTML-MP 家族都会在 
锚(<0>)标记上提供访问键 (accesskey) 属性。允许 
你指定数字0 〜 9作为这些锚的快捷键。这对 T •有数字 
键盘的手机很有用，还有助于省去麻烦的滾动。 

GMWD： 这么说…… XHTML-MP 发明了访问键？ 

XHTML-MP 1.2： bw , 理论上讲，这是好几代传下来 
的，从 WML 到 C-HTML 再到我们。这确实是个传家 
宝。 


XHTML-MP 1.2： 想I上我举几个例子？好吧。如果你 
在使用一个移动设备，可能设置一个锚 (<a>)fe 记同 
时指定目标为_116^或_»)| 3 1^,这有什么意义？很多移 
动浏览器不允许从链接打开一个新窗口。所以我不支 
持目标 （target) 噢，还有框架 （frame) 我也不支 
持。 它们实在是危险的东西。我不支持任何框架，甚 
至那些漂亮的 iframe。 

GMWD： 不支持 iframe? 哼！ 

XHTML-MP 1.2： 别忘，了，我们的 XHTML-MP 家族 
(从我祖父 XHTML-MP 1.0 还是个孩子时算起）会为 
你提供访问键。 

GMWD： 访问键? 


GMWD： WML? C-HTML? 

XHTML-MP 1.2： 我还没死，不过这些家伙确实 
已经不在世上了，无线标记语言 (Wireless Markup 
Language, WML) 被逐步淘汰直到最后完全消失。 
它与 HTML 差别很大，我们 XHTML-MP 家族取代它 
成为了首选的移动标记语言。 

C-HTML (精简 HTML, Compact HTML) 以前曾在日 
本大量使用，主要用于 DoCoMo。 有些人把它叫作 
iMode。 想要表情符号吗？ C-HTML 提供了丰富的表 
情符号。不过它还缺少很多东西，没有表格.没有 
CSS、 没有图像。噢，还没有颜色。啊，真怀念从前 
的曰子。 


WatcK it! 


保证标记简洁。 

我们非常关心浏览器会不会“完蛋”.与 
桌面浏览器相比，移动浏览器（特别是老 
式浏览器）对格式不正确的标记容错性较 


差。你需要特别用心地验证标记，不正确的标记可能导 


致移动浏览器崩溃，还可能更槽糕，甚至可能让手机重 
启。 
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重回 



Jim ： 这么说， Frank , 你认为我们应该用 XHTML - MP ? 


Frank ： 听起来这是最安全的办法。看来我们需要保证标记简单明 
了，才能让这些老式浏览器接受。 

Jim ： 这是不是要求我们还要做些改变？ 


Frank ： XHTML-MP DOCTYPE 修正了 Opera Mini 中的浮动 < div >， 
这一点很棒，不过我对于在这些老浏览器上实现浮动开始有些担心 
了。我知道我的想法有些老套，不过我想是不是可以使用表格来摆 
放这些仪表板信息呢！ 


Jim ： 老兄， HTML 表 格吋是 20世纪90年代的遗物啊。 


Frank ： 通常我都像躲瘟疫•样躲着它，不过它们毕竟还是有效的。 
而且这些仪表板信息感觉确实很像表格数据。另外我实在不相信那 
些基子 < div > 的浮动分栏在我们要支持的所有移动浏览器中都能可 
靠地工作。 


Frank ： 支持哪些 HTML 标 id ， 另外我们可以依赖哪种 CSS 支持，这 
些问题实在让人崩濟。 


我想还是一个问题一个 M 题地解决吧。我希望首先明确哪些 HTML 
元素是合法的，这些手机能够支持。所以，现在先把所有 CSS 去掉, 
以后再加回来。 
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峨儇说一句,还有漶动问题 

并•不是毎个人都拥有触摸屏。很多手机上要在 Web 页面间沣 
吭，办法只有一个，就是利用-个按键或者光 fe 滚动内容。 
在很多界面上，用户向下滚动页面时，毎个可单击的项会突 
出 a 示，使用户有机会进入这些链接。链接和内容越多，滚 
动就越多。 

…… 0•在有坊问鍵 

anchor (< a>)fe 记上的 accesskey 属性允许我们为各个铺指定一 
个数字快拢键，来减少用户的滚动最。用户可以使用手机上 
的数字键快速访问链接。访问键 的语法 如下： 



为链接指定的访问键数字不会自动显示，所以对 T 链接列表， 
使用有序列表(< 01 >)而不是无序列表 (< ul >) 通常会很方便（假设 
列表中的第一项使用 accesskey 丨 ）• 





最后一个问题 

嗯， 还有一 件事忘 f 告诉你》也 i •午这会让你大发睥 
气，想甩手不干。我们能理解。 


很抱歉 . XHTML-MP 12 在 2008 年被 
XHTML-Basic 所取代 . 


XHTML-Basic 1 . 1提供了 XHTML-MP 1.2 的所有内容， 
另外还增加了几个特性。锚 fciil 又有了 target 属性（不过 
我们并不是建议你非得使用这个厲性）。另外还有了一 
些新标 记，比如 < sup >*< sub >。 关键是，你不会失去 
XHTML-MP 1.2 已有的东西。 



名 4. XHTML MP 

: a*J % 器中 i 0 (SF 
不待） 、 


对于移动设备，有很多让人眼 
花缀乱的标记可以选择，不过 

本輋后面将使用 XHTML- 
Basic^ 


很抱歉前面讲 了一堆 已经被取代的东两，不过这 
是为 f 你好。移动 Web 标记领域很复杂，你应该 
对现状有些认 t 只。下面我们不再闲聊 f . 接下来 
会使用 XHTML - Basic 。 这并不太难，我们只需 
要明确不支持哪苎标记，并避开这些标 Id 就行 
f 。 另外 H 前 其至不 用拘心 CSS 样武或布局的问 
题。 
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将文档转换为 XHTML-Basic。 

将当前的 DOCTYPE 标记替换为以下 标记： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" 
"http: "www.w3.org/TR/xhtml-basic/xhtml-basicll.dtd"> 

现在先删除 css 。 

蒯除 CSS<link> 标记，后面再处理 CSS。 

将# tools <div> 中的 <ul> 转换为 <ol>。 

这会在链接旁边显示数字.对 下一个 步骤有帮助。 


为 #tools <div> 中的 <a> 标记增加 accesskey 厲性。 
语法提示见第119页。 


I wvw hf-mw.com.. Q 

Creature Comforts 

Agent Portal 

Welcome back. Or.jesska Evans 

l 恤鮑利 

« 離一。 

coma « i !!« ni 0adinR 叫以咖 

<。二 t = r ,d - d -; 


把基于 <div>W 浮动# dashboard <div> 转换为一个表格。 >k 

< div > 中的内容替换为一个表格.这有点麻烦，所以你可以使用 V . 

第121页上现成的标记（或者可以在 chapter 3 文件夹的 extras 目录中找到这个代 i * . 

码，具体在一个名为 table . txt 的文件中） • 个 尽逢於 


O 将修改后的文件保存为 index.html。 


将这个文件保存为 index . html , 现在我们完成了移动重定向的测 
试，所以使用 index . html 更为容易。 

therejwre nQ ^ 


-** 金 靂係钵 ^da&hboard <div> . 
晃嗲换 t 砍办 t . 


therejare np 

Dumb Questions 


嗯.我知道我们现在要努力简 
化，不过，把 DOCTYPE 改为 XHTML - 
Basic 之后， 115 页上看到的模拟网站 
还能在 Opera Mini 4.2 中正常工 作吗？ 

可以！如果你很好奇，可以到 
http :// hf - mw . com / ch 3/ ex /2 a 查看。 


(^) * Opera Mini 4.2 太老了，不是 
吗？ 到底还有多少人使用这个版本呢？ 

必須承认，这确实不是一个时新 
的浏 JL 器。不过，在移动 Web 的艽蛮 
世界中，这种老旧的浏览器确实存在， 
老式功能手机上（特别是新兴市 场中） 
通常都有这种存在莱些约束的浏見器， 
这就是一个很好的例子。 


不过，你不是刚刚说过替能手机 
的销置现在超过了这些老旧的功能手 
机吗？ 

销量超过并不代表数量超过 。现 
在仍然有大量老式的暫能手机 （按 
我们目前的标准来看，它们已经不算 
“督能 ”了） 和功能手机。还需要相务 
长的时间它们才会逐漸消失。 
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<table> 

<thead> 

<tr> 

<th>Type</th> 

<th>Details</th> 

</tr> 

</thead> 

<tbody> 

<tr> 

<td><p>Message<br />Feb 3 8:54PM EST</px/td> 

<td><p><a href="#">Supply Request #493-C4 Approved</a><br /> 

Hi, Jess, Good news! I wanted to let you know that we were successful in 
tracking down those bottles.. .</px/td> 

</tr> 

<tr> 

<tdxp>Message<br />Feb 3 1:47PM EST</px/td> 

<td><p><a href="# ,, >Supply Request #493-C4 Received</a><br /> 

This is an automated message to confirm that your recent Supply Request 
has been received and is in process.. .</px/td> 

</tr> 

<tr> 

<td><p>Event Scheduled<br />Feb 3 8 : 22AM EST</px/td> 

<td><p><a href="#">Itinerary 39924 Approved LAX -> DAC</axbr /> 

Your itinerary for event : "Bangladesh Flood Event" has been approved. 
Your calendar has been updated..,</p></td> 

</tr> 

<tr> 

<td><p>Personnel Event<br />Feb 2 9:23PM EST</p></td> 

<td><p><a href='*# ,f >Re : Personnel Confirmation 03/05 - 03/15</a><br /> 
Jessica! Thanks so much for committing to this operation! I think 
Dr. Madling is going too and..,</p> 

</td> 

</tr> 

<tr> 

<td colspan =,, 2"><div class= n morelink"><p><a href*”#">More &gt;&gt; </p> 
</a></divx/td> 

</tr> 

</tbody> 

</table> 
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元素验证 



哪些元素合法，可以放在哪里？使用我们学到的知识，并利用你的直觉，确定各个标准中哪些标 
记和厲性是合法的。一个元素可能在多个标准中都得到支持！ 



XHTML-MP 1.2 

XHTML-Basic 1.1 

HTML5 




画 






■bh 






K| 



■EBB 


<u> 

□ 

□ 

□ 


□ 

□ 

□ 

<Ilnk> 

□ 

□ 

□ 


□ 

□ 

□ 

<V!deP> 

□ 

□ 

□ 

<1?vame> 

□ 

□ 

□ 


答案 asi 26 g。 




我的钫闷鍵不 能正常 工作 。 Opera 
MN 氆权 S 着起采捋不 支辩坊 闷讜. 

的手机不带礞镶盘。 



我们承诺过访问键在大置手机上部可用， 
但你不要太当真。 


实际 h 大多数主要桌面浏览器中也支持访 
问键。 
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钫问鍵的实际使用 


如果你想对移动标记测试访问键，则可以在你的桌面浏览器中査 n 
index . html 。 使用以下按键组合测试访问键。 


Chrome 或 Safari : CTRL-OPT [accesskey] 
Fire Fox : CRTL- [accesskey] 

Mac 



Chrome 或 Safari : ALT-[accesskey 】 
FireFox : ALT-SHIFT- [accesskey] 
Internet Explorer : ALT - [accesskey 】 



Chrome: ALT- [accesskey] 

I FireFox: RLT-SHIFT-[accesskey] 


茗哒猙 0 系 铊续獯 铒济托 f 等妃憑 
戍含刁锌节蚵7•同 


戗一些验证 

我们说过使用合法的标记很重要，还记得吧？下面不再只是说说而已，现在我 
们将在模拟网站中验证椋记，确保它们确实是合法的标 id 。 接下来进入非凡的 
W 3 C 标记验证工具 （ W 3 C Markup Validator ) 网站检査我们的代码。 



(validate by 

Fiic ^ Load ) 残老尾則粘砧萁内 
容 (validate by Street ivvpitt) 
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W3C 验证错误 


正常码？玎认缝续蚂? 
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修正铐误 


Q 


有一些嵌套不正确的标记。 


甚至资深专家也会犯类似这样的小录入错误。这也是使用验证工具的原因之一， 


即使你是顶尖高手也免不了犯错误。 




<td colspan=”2"><div class- n morelink , *> 
<p><a href-"#">More &gt;&gt;</p></ax/div> 
</td> 



O Line 74, Column 80: end tag for M a" omitted, but OMITTAGNO was specified 

-l»pan«"2 ll ><div claaa*"noralink"xp><a href- , #">ltog« tqt;tgt;</px/a></di¥></t<^ 


O Line 74, Column 84 end tag for element which it not op«n 

~l«p«n-"2-><div class*"morelink"><p><a href-"#*>Mor« tgt; tgt></px/a > </div></fcd> 


分 Line 74, Column 52. start tag v 


i here 


</div><j| 





这驀个 AK ； [部 4 由一 

个佬瀝 Z ^ tfy </ a > 


一试一 

修正 index . html 文件中的标记问题， 


删除 < thead >、</ thead >、< tbody > 和 </ tbody > 标记 • 

A 修正嵌套不正确的标记。把</3>标记放在 .morelink 
胃 < div > 的段落中。 

^用 W 3 C 验证工具重新验证更新后的代码。 



邾！铼疤代 豪唤功 - 
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练习答案 
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懂移动的 CSS 


CSS Mobile Profile 2.0 ( CSS - MP ) 和 XHTML-Basic (或 XHTML - MP ) 
在一起就像豌豆和胡萝卜形影不离。 CSS - MP 标准是为低到中端手机 
开发的。 


在 CSS Mobile Profile 中能得到什么？嗯，可以得到 CSS 2 所能提供的 
大多数特性，甚至还有一点点 CSS 3。 不过不会是全部。 

理论上咁起來很简单 

实现 CSS Mobile Profile 2.0 的浏览器原本应该支持必要的属性。不过 
事实却让人有些沮丧。对 CSS 的支抟差异很大，这个贵任通常会落到 
你头上，作为“天不怕地不怕"的开发人员，需要你全面彻底地测 
试，避开那些怪异的特殊情况。 

另外，很多 CSS « 性和值在 CSS - MP 中认为是可选的，这说明浏览器 
制造商可以选择支持它们，也可能不支持。 


1 

ft 棚办 紐： 少说多做。 

MM 、 打算抛出-个乏味的列表 ， witness Mobile 
M Pmfile 巾肺紐和料齡難。卜醜接 S 

H 人，明确如何難现有的 CSS 做到 CSS - MP 兼容。 
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mdex.html 


_ 下 面重构 styles . css ， 让 它成为合法的 CSS 移动简档 （CSS Mobile Profile ) 。 

background-image 和 _ 

background-repeat 属性在 * { 

CSS-MP 中是支持的，不过如果 padding: 0; 

有一个包含背景图像的大页眉， mairgin : 

这会浪费很多空间 - 下面去掉背 > 

M S $ 0 body { 

font-family: "Helvetica", ’ 
font-size: 100%; 
width: 100%; 

background-color : #f3ffc2; 
fJ 的石分 background - image • ― url (* cow! 

數扣 ( 象奮 （t 夺 c^s-MP 中 4 不友 background repeat : no-rgpea 

骋 . 銪以釦 U 係穿 -I® ^ background position; 50% 0 t 


"Arial", san-serif; 


f 二 


这个 CSS 的所有内容到目前为止都 
ft 兼容的 维绫前进！ 


font-size: .95em; 
margin: 0.25em 0; 

} 

hi, h2, h3, h4, h5 { 

font-family: "Times New Roman", serif; 
margin: 0; 
color: #10508c; 
text-align : center; 


xhtml-basic 和 css 移动简档的结合 


ExeRctSe - 

系好安全带，做好准备，我们就要开始旅行了。如果一切顺利，等到旅行归来，我们就会看到 
XHTML-Basic 和 CSS Mobile Profile 美满地结合在一起。我们会对 index.html 和 styles.css 进行编辑。 


把<1抑>标记放回到 index.html 中。 

我们又想使用 CSS 了，所以需要这个 <Hnk> 标记。 
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h3 { 

font-style: italic; 
font-weight : 100; 
font-size : 1.15em; 


_ 

styles.css 


} 

ol { 

width: 100%; 


C3SV-/* 


a { 

text-decoration : none; 
color: #096c9f; 

) 

.header~~f 
height : ~150px; 

十 

释 tools ol { 

list-style-type : none; 

} 

#tools ol li a { 

-webkit-border-radius : — 5px; 
_ m oz-bor d er-r a d iu s:~5px; 
border-radius : ~5px? 
display: block; 
height: 1.lera; 
width: 94%; 

background_co 丄 orr #fff; 
margin: 3%; 

border: lpx solid #ccc; 
text-align: center; 
padding: .6em 0; 

} 

.greeting { 

border: lpx dashed #10508c; 
border-width: lpx 0; 

I 

#dashboard { 

-webkit-border-radius : ~5px; 
-mor~border-radius : ~5px; 
border-radi-us- ： ~5px; 
background-color : #fff; 
border: lpx solid 眷 ccc; 
margin: lem 3%; 
padding: .5em 0; 
width: 94%; 



角.达 tn ^ C ^ S « S-MP 中基不 
合4的. 之多发 老式洌％ 
器不支鞾迖螫深作..将它 




链绞翻到 T 一页 
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记得一定要签婚前財产协议 



ExenciSe 




再回到 index . html : 为表格元索増加一些类。 



。氣. •: 乘央， 2翁您泛 
#炎在用射名外 3 朽^ 


T- iitr.eve^ihtr.odd 
龙交努在用 


<tr class="even w > 

<td class="event event_meta w xp><strong>Message</strong><br 

/> 

Feb 3 8:54PM EST</p> 

</td> 

<td class=* , *event w ><p><a href="#"><strong>Supply Request #493- 
C4 Approved</strongx/a><br /> 

Hi, Jess, Good news! I wanted to let you know that we were 
successful in tracking down those bottles...</p></td> 

</tr> 


夺现在再来看 styles.css: 调整样式，应用到表格标记。 

我们把 <div>& 为表格来建立布局。这里希望去除那些不再有意义的厲 
性，另外对其他厲性做适当的 修改。 


響 

index.html 


利软 ii 3 个暴性 ■ 


Idashboard td.event { 

border: lpx dashed #ddd; 
border-width : lpx 000; 
margin: .5em 0; 
padding: 0.5em 0; 
wieKrhr 100%r 
clear:~both; 
overflow; hidden^ 

) 

Idashboard .odd { 

background-color : #fff; 

) 

♦dashboard .even { 

background-color : #eee; 


Cif 不 4 穷:•乡劫 



♦dashboard td.event_meta { 
width: 30%; 
margin : ~0 2%? 
float:~leftr 


不再让内容 浮动- 另外， 
实现 CSS - MP 的浏览器只 
霈要实现一个 overflow 值 
(即 “ auto ” > ,所有其他 
厲性都是可选的。 CSS - 
MP 中不能依赖于 overflow 。 
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使用 overflow !! 性嫛当心！ 

overflow : seroll 在移动领域是完全禁 it 的。任何平台-般都 
Watch it! 不 支持 ， 在交互性方面这是很让人讨厌的一个特性。 

实现 CSS-MP 的浏览器中， overflow 属性的行为也变化多端, 
现在只要求它们支持一 个值： aim 要尽可能避免依赖干 overflow 。 
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按钮太长了 


嗯……少？点东西 

来看看 Opera Mini 4.2 模拟器上当前这个模拟网站的鈸屏图。注意到 
什么了吗？我们丢掉了 < ol > 的列表序号，要知道这些数卞指示了访问 
键。唉呀，真不妙。 

那些数字去啷里了？ 

那些数字还在“那里”，只不过我们应用 rcss, 使 <n> 元素看起来 
像按钮，占据了窗 u 的整个宽度。所以这些数字从可见的内容左边 
消失了。 

正常情况下，要“把它们找回来”，我们得使用类似这样的 东西： 



显示在 < n > 的内容（链接）旁边（对干我们这种情况）。听起来好 
像不错，是吗？ 

遗憾的是， Ust - style - position 在 CSS - MP 中并不支持。所以我们遇到 
一个难题。可能需要把这些链接转换为-•个简单的链接列表，而不 
是现在这样像按钮一样。这样数字就会再次出现了。 

爯见 ，按钮 



通过将 # tool S ol 和 # tools oi li 的规则替换为以下规则，我们就能再次 
得到有序号的列表广： 


ftools ol { 

margin: 0.5em 1.5em; 


如果把现沒的 c ^ ss 滅硪撕 


Creature Comforts 
Agent Portal 

Welcome back. Or. Jessica 
_Evans __ 

1. Your Dashboard 

2. Messages ( 2 ) 

3. Your Schedule 

4. Request Supplies 

5. Request Personnel 

6. Call HQ 


f 涫扣一点外 2 路 fifths ± 5 
泽在刁^ ^ ^ * X * , 


不过 ， Creature Comforts 査看 
这个布局修改时有异议 
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噶……我炙是希望达整功能 
箱捿蘑起采傖拽钮氐不墨 链捿。 


Creature Comforts 坚持按钮外观. 
还是希望改 回来。 

要用合法的 CSS - MP 做到这一点，唯一的 
办法就是把列表再转换回 < ul >, 把数字 
增加到内容本身，然后更新 CSS 样式规 


U ㈣ ㈣ 一 




修改 styles . css 文件中的 CSS 选择器，在 index . html 中将 < ol > 转换为 < ul >。 不要 
忘记还要在链接的文本内容中增加访问键数字！ 




C 


♦tools ul 

} 

•tools ul li 

… ^ 


} 


(i f i # ^3 35 i #toots 


vi f If #tools Di Ufi 用的 c ^ s „ 


<div id="tools"> 

<ul> 

<li><a href="#dashboard*' accesskey= M l*'>l. Your Dashboard</a></li> 
<li><a href 塞 ••#•• accesskey"2">2• Messages (2)</a></li> 

<lixa href= M # w accesskey="3">3• Your Schedule</ax/li> 

<li><a href= M # M accesskey="4">4. Request Supplies</ax/li> 

<li><a href= M #" accesskey='*5 ,, >5. Request Personnel</a></li> 
<li><a href="#" accesskey="6">6. Call HQ</a></li> 

</ul> 

</div> 



index.html 
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新网站带回了 creature comforts 的按钮 


大荻成功 r 

樣 C0I 〜• I 

^g ent P ° f r .!!!L f vans 

Creature Comforts 


B-U»c-teBCKry_^330 L 

S 孑栌梂拉闲玷 J 


Welcome ^ l^ ua 1 

v VOUI 0 «隊刪 
2 Merges U1 
3 . Voo » Vl ， e < J * 

4 B?que^Swn»l *«， 




, P «! CV ，**^ 


?*fionr*M 


,.',.iV. HO 


>bfuarv 4 - Li 
pcfsonivelto 


tLoadtos^^ 

二 5 yW a ' C, 
二二―一 
ellort 


Ard <ontactiog 


Agent Portal 

WWt ， ."m* bmk. ih Jcssiut Uvuhs 

1 Your Dashboard 

2 Messages i2) 


• Aoent Portal 

lAfekomp b^ck Df">Vs'ic^" f 

p …… 

I_ ^ Vour P«shhC<kid 

2 «^r 

1 fout schedule 
^ Rc*iu*si Sopr »>*； 

saHKSllHBQg 


urrenOv 

die 


Event 


Oetalls 


在较扣栌笮钧（比如 
ii 个 A>v«<fold Nd^ucS S) I: 

卷起痕不抟 


2<ac 

5« 

8 tw 

0 


3 ocr 

6^o 

9 wm 




〒以奋 l^ttp：//hf mwco^chs/ex/s 
罨到矗终叙本的 桷扣网 站 


BULLET POINTS 


■ 这是一个浩大的世界，有上百亿的移动手机（这 
是真 的）， 它们并不都是前沿的智能手机，有 
时需要让你的网站或 Web 应用适用于那些老式手 
机。 

■ 存在一 些实际情况：较早的系统.难对付的客 
户，或者一些特殊的项目，这使得建立一个完全 
独立、面向移动设备的网站很有必要。 

■ 要把移动信患流路由到一个移动网站，方法之一 
是使用服务器端移动设备检测和重 定向。 

■ user - agent 嗅探是检查进入的请求是否来自移动 
浏览器的一种常用技术。 

■ user - agent 嗅探检查浏览器发送的 user - agent 首部 

(作为 HTTP 请求的一部 分）。 用户可以“欺 
骗”他们的用户代理（可能有意或无 意）。 这是 
这种方法的一个缺点。 

■ 有些老式移动浏览器（以及当前的低端移动设 
备）实现了不同的 HTML 和 CSS 标准。 


■ XHTML 移动简档 （XHTML Mobile Profile , 
XHTML - MP ) 是很多移动浏览器使用的 一个针 
对移动设备的标准。它与 XHTML 类似，不过不 
完全支持 XHTML 中的所有特性。 

■ 类似的， CSS 移动简档 （CSS Mobile Profile , 
CSS - MP ) 是一个针对移动设备的 CSS 标准。 

■ XHTML - MP 被 XHTML-Basic 1.1 取代，后者与前 
者基本相同，只是支持的元素更多一些。 

■ 为移动 Web 项目选择适当的 DOCTYPE 很重要，要 
注意保证你的标记合法，不正确的代码可能导致 
手机表现很差。 
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thereictre no 

Dumb Questions 


:可以用 XHTML - Basic / XHTML - MP 而不是 HTML ， 另 
外可以使用 CSS-Mobile Profile 而不是全面的 CSS 2。 那么 
有没有专门针对移动设备的移动版本的 JavaScript 呢？ 

是的.碑实有一个针对移动设备的 JavaScript , 名 
为 ECMAScript 移动简挡 (ECMAScript Mobile Profile ) ，不 
过不要太依赖它。我们处理过一些手机，在那些•手机上一 
旦页面加栽， JavaScript 就无法改变页面上的任何内容，这 
说明使用 JavaScript 做的大多数工作都无法完成。所以，如 
果你面向老式手机，則最好不要太指望 JavaScript . 

问••无线 CSS 呢？ 

无线 CSS (Wireless CSS ) 是一个与 CSS-Mobile Profile 
非常类似的标准，不过支持的属性更少.它已絰漸漸没落， 
我们看不出有什么理由使用它而不是 CSS - MP U 

1 > t 5) :如果使用 user - agent 嗅探来路由移动信息流，则可能 
会错误地标识一个用户的浏览器，这可能因为用户欺骗了 
她的用户代理，也可能因为你……弄错了，总之用户最后 
是不是会被重定向，进入移动版本的网站，而无法返回到 
桌面版本？ 

¥:问得好！这很重要。在真实情况下，你可能想提供一 
个“逃生舱”，通常采用的形式是提供一个返回桌面网站 
的键接。 

仅仅这个链接是不够的，你需要让重定向脚本知道用户希 
望访问这个桌面网站。可以通过设置一个 cookie 来做到，指 


示这个首选项，如果浏見器设置 T 这个 cookie ， 就不要完成 
重定向。 

:如果只采用完全合法的 XHTML-Basic 或 CSS-MP 之 
类的标准，无法让我的网站做我想做的 事情， 那该怎么办？ 
是不是天就塌下来了？是不是全世界的手机都会崩溃？ 

要在移动 Web 领域取得成功，这意味着要做出让步和 
去协。编写合法的代码备然是我们追寻的目标，但是并不 
总是100%可行。不过在破坏规則之前先要了解规利，这绝 
对是一个很好的座右铭。 

1^1 I 是不是每次想要支持 大置移 动浏览器时都必须使 
用 XHTML-Basic? 感觉它很受限 啊， 

这里我们必须借用经典的移动 Web 田答： “要看具体 
情况 . ”对于 Creature Comforts 这种情况，需要支持大：!■老 
式的.功能不太完备的手机。我们的目标是提供一个服务 
器端数据服务，尽可能在更多的功能手机上很好地1示， 

很多情况下使用 HTML 5 也是合理的方法，甚至是在老式手 
机上。不过我们希望向你展示面对老式设备时需要当心的 
这痊 问題- 

1^) (你 在第127页上没有给出列表，不过我确实想看看 
CSS - MP 中支持和不支枓的属性的完整列表. 

嘿，你走运了！ CSS Mobile Profile 2.0 规范相当闻洁 
易懂，可以在这里找到这个规范•： http :// www . w 3. org / TR / 
css-mobile 


如莓用户 S 3 處列#®版 
衣.龙油们两利在 达个铸 
滅.板的栉#网玷丄 * 9不妗 


. v 通货_ 

嘿，开发人员！我们怎么支持那些想要桌面版本的用户呢？你能想到 
从移动网站增加一个指向桌面网站的链接需要些什么吗？另外，要编 
写和检查一个存储用户首选项的 cookie , 需要对 redirect . php 做哪些修 

改？ 
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4 决定支特淮 


命 


七们要支持哪些设备 ?/ 



我们实在没有那么多时间在每一个设备上测试。 

你必须划分出一个界线，确定能支持哪些设备。不过如何确定呢？有些人可能 
使用一些特殊的设备，而你无法在那些设备上测试，对干这种情况你该如何处 
理？完全不考虑他们吗？或者有没有可能采用一种合适的方式构建 Web 页面，使 
人们用你从未听说过的设备也能访问？这一章中，我们将结合项目的需求和用户 


的使用倩况制作一种*法剂，帮助我们确定支持哪些设备，以及对于不支持的 


设备该如何处理。 
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关于妥协 


你怎么知通在哪里划分界线? 

每 个项目 都是由一系列妥协和折中组成的。 
我们要考虑投资人的需求、用户的体验反馈， 
还要考虑到搜索引笮优化。如果有人不能体 
会和理解你的具体应用背景，则对他们来说， 
确定哪些方面会影响项目简直就像是有*法 
一样。 


确定你关注的设备也是类似的。需要有一定 
的原则和优等级，再动动脑筋，洒一点魔法 
灵感，就能得到一个决定成功的设备列表。 





决定支持谁 


稍事体息 

到目前为止，我们一直都在努力 I :作，>1事亲力亲为，不过就像拍一部电影一 
样，演员也有自己思考的时间，现在他可能 H 光游离，正在为一个練手的问题 
苦思冥想。突然间，灵感来了，立刻又投人到他的角色中。 

不同之处在干，现在你就是演员。你巳经有了决定在哪里划分界线所需的全部 
工具。 

不过，你可不想在键盘 h 找灵感，所以我们做个短暂的中场休息，先不考虑如 
何构逮 N 站，而是讨论一些抽象的东西，把原则和优先级转换成你要支持的设 
备列表。休息之后，你的人脑就能更加专注，能更好地解决问题。 

不要相.心，我们很快就会回来，继续研究网站的构建。最好的导演都知道，他 
们要做的应该是为演员们提供一些指导，具体的表演要让演员自 d 完成。 

我们熏要划分的界线是什么？ 

要支持已有的所有设备，这是一个宏伟的目标。在每一个设备上完成测试一定 
会让你发疯的。你可能希望 i 持尽可能多的人和设备，不过为了理智一些，你 
必须能够冋答3个问题。 

o 我们支持什么设备？ 

你打算在什么设备或者哪些类型的设备上测试你的页面， 

确保它们能按预期的方式工作？ 

o 我们不支持的设备会怎么样呢？ 

怎样做才能确保尽管未在某些设备上测试，但这些设备 
仍能使用你的网站？ 

o 我们不能支持的设备会怎么样呢？ 

如果用户的设备不符合要求，该向他们提供什么消患？ 



• 费办… 


你能想出不支持和不能支持的设备有哪些不同？ 
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支持与不支持 


不支特的 设备乌不能支持的 
S 备 

一旦知适要支持哪些设备，其他的都应该是不支持的设备。 
那么为什么还要区分不支持和不能支持的设备呢？ 

你可能没有明确支持一个设备，但这并不表示你构建的网站 
不能在这个设备上运行^如果你使用了良构的语义 HTML 标 
记和渐进增强来建*沉面，那么除了你保 ilE 的那些浏览器和 
设备外，你的页面可能在更多的浏览器和设备上都能正确访 
问。 

不过，有时一个浏览器可能太老，能力太弱，所以你根本无 
法支持这样一个浏览器。 

例如，如果你在 Nt 卖鞋子， 則需 要使用 HTTPS 来保证信用 
恃信息安全。不过有些老式手机不支持 HTTPS 。 倘若出现这 
种情况，最合适的做法就是告诉这个、不能通过她的 f •机来 
购买鞋子。 




不要太刻萍 


如果你不支持某个人的浏览器，则要好 d 妤 
语地指出。他可能没有最新的 T •机，但是完 
全可以用另外•个更好的浏览器。 

另外，谁都不愿意被人说他的手机足个破烂 
货。要亲切地对待你的顾客。 



不要撙除不支持的浏览器， 

你可能无法验证你的网 ]« 能够在-个浏览器中 
运行，不过这并不表示你要排除它，要求人们 
不要使用这个浏览器。如果你使用语义标记构 
建网站，則它将在很多浏览器中都能工作，包括你没有测试 
以及对与项目不重要的那些浏览器。 
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如篥手机太老，线 HTTFS 邾浚布.不能支辩达螫 
手机我玎从 J 1 驊.不过，我党得.如粟蓄先崖砵 
_个5本 HTML 文梢.然后采用來进缯强用 CSS 和 
JavaScript 来逐步缯并么它在任何械方郫戌谨 
能 i 工 作吒？ 


你说得对。在很多情况下，渐进增强意味着你可以支持 
数以百计的浏览器。不过不同浏览器上的效果可能不 
同。 

从基本 HTML 起步，渐进增强这个文档，大多数 Web 页 
面应该都是从这个起点逐步发展的。有高级特性的浏览 
器可以得到类似圆角矩形和梯度之类的增强效果。 

不过，即使是网站或应用的 S 低需求，基本 HTML 也 
可能无法提供。例如，一个视频游戏可能需要 WebGL 
(这是一个图 像库） 来实现游戏场景。如果浏览器不支 
持 WebGL , 那么根本没有内容可以显示，也就是说， 
也许到几年这后，从 WebGL 渐进增强到 WebGL 2时这才 
有可能吧！ ^— 


经验告诉我们，在打破规则之前你首先要知道规则是什 
么。一般都应当从基本 HTML 开始，然后使用渐进增强， 
除非你有充分的理由证明这样做不可行。 


即使这种做法确实无法达到要求，也可以提供一个基本 
HTML 文档，指出“抱歉，这个游戏需要 WebGL 支持” 
之类的消息，这也是一个不错的起点，可以在此基础上 
构達游戏。 
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5 个 W (谁' 为什么' 什么、哪里和什么 时候) 


兵子你的顼 D 问几个问越 

听 hi 就像是在教你1加1等千 2 ，不过要明确如何划分界线， 
第一步应当是仔细考虑你的项目 * 用户是谁？哪个功能是核 
心？哪些特性是可选的？躲佳体验是什么？ 



«……我孖崖的达个捤淇6用 
til 知逢用户篥去嘟戛。如粟 
达个人的手机浚布备 PS 怎么办7另 
外蚌玫缒铒怎祥才翼足够准 
碥？ 


达个 R 站上耷的东 甚郗塔 
价$10000,不姑祀它命名为卯 thy 
Rich T Us 。 我们能认为大多数 
窖户邾 笮最新 的铍能手机磷？ 


锚货小 tt 翥向瀋在的窖户驊体展示达个® 

用，不过««人员遇到的鲁嬝闷*是黑蘑4万 
手机。我们怎么能钕到一方驀玎吆在达么老的设 
杳上展乐 fi 用，男外在 IPhone 上还能笮潷亮的 
表现 7 


142 第 4 章 




你现在的 位霣* 143 


决定支持谁 


魔法配方 


移动魔法剂的紀方 

询问关子项目的问题时，就是在开始调 杳哪些 因素可以帮助你做出决定，确定 
哪些是你需要关心的设备。你的用户群体是什么，他们吋能使用什么设备？哪 
些是必须有的特性，而哪些是" I ■有 可无的特性？ 


这里就引入了庵法。把这些因素混合在一起吋以得到一瓶麾法剂，告诉你需要 
支持哪些设备。 




设备能力 





硬件性能 


d 个分 j % g i ^ too\^it 


浏览器特性 



在线 VS. 离线 


用户使用情况 


伐的 S 秀 # 龙 4 


你的害户蕞<5芍 
翁值用娜# 设春? 


投资人设备 





连接速度 



士*呷站奇/、靨戍 w 
*1(1. 
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利用工爯和数椐 



用户使用情况如何？可以深人研究 Web 分析，査 
看当前用户在使用哪些设备。要拓展到新的地区？ 
可以抽取关干那些国家顶级手机的数据，比如査 
看新加坡最酷的手机是什么。 



分 納巧以 4 web 说 d .疚老 
采用苒他衫式诔玆） • 鹆客乡 
的使用 m V . - 

如某仿的网站给样刼 .申户 的沭妗項碲 
^杖鐾碎 ㈣ 逢分作村今运 ㈣ 
玷. < t 含涔纠迖级分蝌 

存世孓 i : 不阌祕 S 硝详 
栌4机笮啄 夂不同 


设备 


^ t Mm ^ 


敉入，4舲以总 
⑽糾度4 = 
杉响〜个人笱锥耷 •" 
樽的 


人口 

统计 


如莓__个轵相砭^哒工只和數轉，柙幺仿的降相辽空«唔' 
:又关系.伐珉聿运，可以夸考爹今移幼统 O 的一个痄在.内 
容呼 i ’# 含.祕 fit 存 http :// btt . ly / tv , stats 0 


V-3^ 
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案例研究练习 



示例 

^案例研究 

Mo Better Museums 正在构建一个应用，允许参观傅 
物馆的人把他们的手机相机对准某件艺术作品，可 
^ 以 看到一 个特别说明，其中包含关于这件作品的更 
^ 多信息。它能根据手机的位置指出正在参观哪件艺 
今术作品。博物馆的手机信号接收情况可能不太好， 
^ 时断时续。 


该戴上你的魔法帽施展些魔法了 •： 

下各个案例研究， r 二二：一二一… 

作和 s 标用户群体建立一个蘂求 

这个列表应当包括必须有的需求和可有可 
无的特性。 


对于以 
根据这个应用要完成的工 


必领有的 昶性： 沩问徇机。 


案 例研究 

选為物:次 

psss 
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VJ 

案例研究 需求: 

Bowling Boxers 是游戏 Dogs Playing 
Poker 的视频游戏 版本。 你要控制一 
个拳 师犬，以著名的 C . M.Coolidge 
作品中的狗为原型，它正在一^激 
烈的小巷滚木球赛中争抢。显示这 
些角色和疯狂的动作会让很多手机 
达到最大负荷。 




哪些需求是必不可少的？另外 
哪些可以通过渐进增强来支持？ 


在01 蒗的 




丄的手机^ u 过他们 的年 


1 
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需求列表 


EXAMPLE 

案例研究 

Mo Better Museums 正在构建一个应用，允许参观博 
物馆的人把他们的手机相机对准某件艺术作品，可 
以看到一个特别说明，其中包含关于这件作品的更 
多信息它能根据手机的位置指出正在参观哪件艺 
术作品。溥物馆的手机信号接收情况可能不太好, 
时断 时续。 

需求： 

• 必•领有的鞾性 : 友苑 I 賴 ScrLpt 。 

须有的耗性 :沩问相机。 

• 必须有的耗 性: 饫问佬 I 。 

•芍有可*的麵 fl : 支持虞线栈式。 


氣 — 

&enctSe 

§0 (.VtlOH 


如果有人告诉你某个问题没有正确答 
案，你是不是很气恼？嗯，对此很抱 
歉。谈到需求，确实没有正确答案。 

气恼如果你对这些案例研究的答案与我 
们不同也不用着急。根据你的经验，你 
可能会提出一个我们忽略的需求。相信 
你自己的经验和直觉。 


Kil 问 4 一 个弟的 VV3C API 
f*)C 梯綷 it. 扣鈑冬栌 

A^droi<X _ 戏供都分 - 


案例研究 

ifSS ! 

㉝ 款用手能机支持他们可： 




.樹的槪《 

• sns ，： 鮮 


地图图译 








现洚 tifl 坩発的机 
含！ 






决定支持谁 



Bowling Boxers 是游戏 Dogs Playing 
Poker 的视频游戏 版本。 你要 控制一 
个拳师犬，以著名的 C . M.Coolidge 
作品中的狗为原型，它正在一，激 
烈的小巷滚木球赛中争抢。显示这 
些角色和疯狂的动作会让很多手机 
达到最大 负荷。 



需求： 

• ^ tj 6t) tt ： 


否 W 涊戎性舴含蚩朽响❶ 



㈣ 


$hc =T— 

如果分析大多数移动 
网站，你会发现建立网站的人并不淸 
楚他们需要支持哪呰设备。他们只是 
尽可能做出最正确的猜想，然后在此 
基础上迭代调整，直到最后完善网站。 
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侦探工作 


我怎么知通颜窖布含适的设备 
哝？ 




问得好。主*有两个 方法： 服务器端设备检测和 
客户端特性检测 D 我们会在下一章介招设备检瀏 
数据库， 

看来你已经想结束中场休息，打算继续构建网站 
了。没错，我们说过不会休息太长时间。 

现在让我们再整装待发，投身到疯狂的设备数据库 
世界中，来见识见识到处都能看到并影响 Web 开发 
人员的一大祸害： user - agent 串。 

别担心。它没有听上去那么糟糕。读完下一章， 
你就能很好地控制这些吋能带来麻烦的 user-agent 
串。 


: 


BULLET POINTS 

■ 每个项目都会对它支持的设备划分一个界线。 

■ 了解在哪里划分界线需要结合经验和研究，还 
需要有一点直觉 # 

■ 不支持和不能支持的设备是有区别的，不能支 
持的设备是因为它们缺少一些关键的特性，使 
它们无法使用你的网站。 

■ 分析你的项目需求和目标用户群体，可以帮助 
你确定在哪里划分界线。 


■ 应当把渐进增强作为默认方法。这样一来，除 
了你公布可以支持的那些设备，你的网站还能 
在更多的设备上正常工作。 

■ 除非你很确定地知道不能支持某个设备，否则 
不要排除这种设备。新的浏览器一直在不断涌 
现。要给它们一个机会证明自己符合要求。 

■ 不要被移动的复杂性吓倒。你已经掌握了所需的 
所有工具，利用它们完全可以知道要在哪里划分 
界线。要相信你的经验和直觉。 
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+分腑动+^ 



尽管能确定我们支持的设备，但有些烦人的小问题还不能解决。 

如何了解用户移动浏览器足够的信息，在向他们发布内容之前能够知道这些浏览 
器确实符合要求？如何避免只为那些最低档次的设备构建内容（往往很简陋）？ 
另外如何合理组织所有内容，以免我们焦头烂额？这一章中，我们将进入设备能 
力的领地，学习如何用设备数据库访问设备能力， 最后还 会介绍如何将它们归 m 
为设备类，使我们能安然应对。 
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要按紧急按钮 


学生有麻烦， 槿供紧急桉钮 

Acedlt ! Test Prep 专门致力于为用户提供高级客户服务。其目标是 
针对每一个学生，这些学生在极其刻苦地学习，为他们的职业生涯 
做准备，他们精神高度紧张，吋能要参加标准化结业考试，或者要 
考取某些证书， Acedlt ! 正着力让他们能够与作为学科领域专家的 
导师建立一对一的联系。 



有时学生可能慌乱得手足无措。正是由干这个原因， Acedlt ! 希望在 
网站上创建一个页面，专门帮助那些稍神紧张的客户，调节他们的 
情绪。这个页面名为 Pm Freaking Out ! (我要发疯了），目标很简 
单， ih 客户随时与某个待命的导师联系。 


如* "•个 用户*萍得 仗翥龙 我.俏若在移 
动洌览》上能潘利一令大大的釭色飨 
«. 辨 T 达个桉饪后，軾能女 刻拨出兔诂， 
达不墨很雄蚂？ 


Ac6dit' tf) CBOl 
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这个按钮 R 针对移动手机 



不过怎么釦道用户在用移动手机哝? 



Frank ： 也许可以根据浏览器的窗 U 宽度， / f •利用 
CSS 媒体丧询来判断吧。 

Jill ： 在这里不行，我反对。一个窗 U 窄并不表示 
浏览器在真 IH 的移动手机 h 。 

Frank ： 有道理，我想如果我们使用一个基于宽度 
的媒体查询，锒沿在窄窗口浏览器以及平板电脑 
等设备上可能都会出现这个紧急 按钮。 并不是所有 
移动设备都是手机。不过还有什么选择呢？ 

Jill ： 理想情况下，我们要找到某种方法得到用户 
浏览器和设备的有关信息，这些信息要足够特定， 
能提示这是不是一个手机，或者提示我们它只是一 
个分辨率低或屏幕窄的设备。 
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一本浏览器数据 


移动设备数椐源玎认帮忙 

移动设备数据库包含关干移动设备的浏览器'平台和硬件特性 
的详细倍息。如果提供一个唯一标识的键（通常是一个 user - 
agem 串）， 通过査询这个数据库.我们可以得到 有乂这 个设备 
及其浏览器的大董属性。 





有了这呰数据，就可 
以根据设备的特性来 
调整 内容。 


(1M) 
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来认识汄 iHWURFL 

WURFL (无线通用资源文件 ， Wireless Universal 
Resource FiLe ， 通常读作 “ wuhr - full ") 是 •个 
开源的设备数据库，包含大畐:关于移动设备及其 
浏览器的特定能力的信息。 

最近，长期以来一直维护 WURFL 项目的一些人 
新成立了一家公司，名为 ScientiaMobile ， 专门为 
WURFL 提供商业支持。 

WURFL 会跟踪移动设备特性的详细信息，从铃 
声格式到物理 屏幕大 小都会 U ! 录。 

作为 Web 开发人 M , 我们并不是对 WURFL 的所有 
能力都感兴趣，不过确实可以在其中找到•些非 


设备不是平台，也不 ft 浏览器。 

目前还没有一个合适的词来表达 
“一个设备的硬件特性以及«平台、 
操作系统和浏览器” # 确实应该有 
这样一个词，能清楚地表示出上述含义 0 WURFL 
中的“设备”溉念就是这三者的组合，包含了硬 
件、操作系统和浏览器的有关信息。 

只看“设备”这个术语很难淸楚地了解它的真正 
含义。当然对此我们也有 贞任， 所以要记住，尽 
管我们只是使用了很 简箏的 一个词“设备”，但 
它往往同时隐含了浏览器、硬件和操作系统。 



常有用的宝贝。 



自己动手试试看！利用 ScientiaMobile 的资源管理器，你可以在 
Web 浏览器中与 Tera-WURFL 数据交互， 


在一个移动浏览器中访问 http :// www . tera - 
wurfl . com/explore 

A 访问 “See my capabilities ” （查看我的能力）部分，浏 
览它为你的移动设备和浏览器返回的能力列表。 


懸變 


还可以在一个桌面浏览器中访问这个资源管理器， 
输入任何 user-agent 串来査询相应设备的能力。对于 
一个已知的用户代理，要査询相应设备的能力，这是 
一种快速简便的方法， 


r=r 



V 


<5 lT>hot^ -f L . 


资谏 f If 器中糾 i 
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大声说出 WURFL 

WimFLa 其能力 



WURFL 采用能力 ( capabilities ) 集合的方式提供移动设 
备、平 台及其 浏览器的有关 (3 息。可以使用这个佶息相应 
地调锒你的 Web 内容。 

n 前 WURFL 跟踪 ill 诂500多个能力，分为20多个组，比如 
css (这个浏览器能支抟圆角吗？背岽图像 呢）， 再比如 
playback (这个设备能播放哪呰类型的媒体）。 

设备数据在•个很大的 XML 文件屮维护，这个文件会定期 

更新。姑新版本吋以在这个项目的 Sourceforge 豇面找到。它的 

不只一种 WURFL ^ ^ 

SciemiaMobile 的资源莳理器违立在 WURFL 的一个特定实 
现堪础之 h (即 WURFL 的数据库版本， WURFL Database 
Edition , 也称为 Tera - WURFL ) ,它将 WURFL 设备数据 
保存在•个数据库中，而不是放在平面 XML 文件屮。逮//； 

Tera-WURFL 的目的足作为一个 Web 服务或 PHP 库，移动 
M 站可以査询这个服务得到 user-agem 串相应设备的佶息。 


有很多+同的 WURFL API 和实现，不过它们都有一个共 
间点：邯是一个庞大的 WURFL XML 文件，包含所有移 
动设备数据。完整的 WURFL 实际上是一个组合，包括 
WURFL 数据文件 ( XML ). 存储数据的方式以及与之交 
互的 API 。 

我们将使用 PHPAPI 

H 前针对多种主要编程语 a 有多个 WURFL API 。 我们将使 
用 PHP API 和炼千文件的数据。 
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WURFL 有很多特有的特点（其中之一就 ft 它并不跟 
踪每一个用户代理），使它能很好地工作。 

WURFL 的开发群体长期以来一直都在努力维护这个 
\数据源，这说明并不只是某个可怜的家伙窝在小屋子 
里痛苦挣扎，试图跟踪市场上毎•个新设备和浏览器， 
这不仅吃力+讨好，而且几乎是不可能的。 

各个 WURFL API 的算法完成用户代理匹配时很聪明^ 
不仅如此， WURFL 已经存在一段时间，已经有人铁吋 







信并得到证实的记录数据，而且很多卞.要的 Web 用户 
都在使用（同时也在为它作贡献），听说过 Facebook 
吗？ 

当然，如果 WURFL 不能满足你的需求，还有另外一 


A 设备数据座 可以 使用，如 DeviceAUas，DetectRight 
和 MobileAware 。 你的项 HK 该选择哪-个设备数据 


库，这取决 f 你的需求、实际预算，以及许可证耑求。 
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没有傻问题 


therefore no 

Dumb Queistipns 


1^) :什么是 ScientiaMobile? 

a ScientiaMobile 是 2011 年由 Steve 
Kamerman , Luca Passani 和 Krishna Guda 成立的一家 
公司。 Luca 从 200 丨年与 Andrea Trasatti 开始启动 
WURFL 以来，一直是幵源 WURFL 项目的维护者之 
一。 Steve 创建了 Tera - WURFL ， 它已经成为现在的 
WURFL Database Edition 。 

: WURFL 免费吗？我要付钱吗？ 

这要看情况。 WURFL 理论上讲是开源 
的 。 WURFL API 在 Affero 通用公共许可证第3版 
(Affero General Public License v 3, AGPL ) 下可用， 
这也是一个开源许可证 。 WURFL XML 数据库则有一 
个受限的许可证，只允许结合 WURFLAPI 使用. 

所以，如果你能邊拽 AGPL 限制，則不必付任何费用。 
不过， AGPL 比 GPL 更有“侵略性”。采用 AGPL , 
倘若在服务器上运行一个软件、就会被统计为一个发 
布，这就必埙邊蚀相关规定，要求你对所有衍生工作 
开源。 

如果 AGPL 对你不适用（在很多情况下可能都不 
适用〉， ScientiaMobile 会向你出售一个商业许可证。 

如果我要集成 WURFL 和（这里插入你最軎欢 
的某个开源方 案）， 并在其基础上构建了一个网站， 
我必须将整个网站开源吗？ 

答案很简单，可以购买一个商业许可证，或者 
与你的律师谈谈。 ScientiaMobile . com 还提供了 一个 
许可证 FAQ 极块。 

1^) ;有没有其他产品也能提供 WURFL 的功能？ 


^有。 WURFL 是唯一提供开源许可证的设备敫 
据库，不过确实还有很多商业数据库， Device Atlas 
可能是最知名的一个产品了。其他产品还包括 Mobile 
Aware 和 Detect Right a 

除了 PHP API 以外， WURFL 还有哪些 API? 

¥:ScientiaMobUe 除了 PHP API 外.还 提供 了 Java 、 
•NET 和 Database API, 

IWURFL 数据如何更新？更确切的讲，我怎样 
才能在 WURFL 更新时得到新数据？ 

V :ScientiaMobile —直在关注新设备。有时制造商 
会直接提供信息。其他情况下，都是使用 WURFL 的 
人提交信息，设备数据库开发商所做的很大一部分工 
作就是要验证别人提供的关于新设备的信息。 

| V ^) I 谁来决定 WURFL 跟踪哪些能力？ 

^^ SciemiaMobile 会根据群体提出的建议来选择跟 
踪哪些能力。 

^你说的这个 WURFL 群体在哪里？ 

这个群体是一个邮件列表。 WURFL 很早以前 
就有了，所以这个列表名叫 WML 编栈列表（很古老 
的名字）.另外 ScientiaMobile.com 上的支持论坛也 
会有相关讨论 • 、 


Ci 个蜓枝列彖句以在 http - y / te^.0^. 

妒⑽ e ^/0 咖戍从从 找、 
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W 服 FL : 聪硝的 API 代码 

WURFL API 尝试将输人的一个用户代理与一个已知设 
备匹配时，如果数据中没有指出具体的用户代理，它 
也不会不知所措。由于跟踪已有的每一个用户代理是 
根本不可能的，所以 API 匹配函数在没有准确识别出用 
户代理时会采取一些聪明的小技巧。 

设备宗族树 

WURFL API 分析一个给定的 user-agent 串时，会评判一 
系列候选情况（这些候选设备的通用性依次增加），目 
标是至少把这个设备_类到适当的相关设备家族中。 

可以把 WURFL 的数据看作是一种设备树，树干代表一 
个通用浏览器，各个分支、小枝杈和叶子代表更特定的 
设备或设备组。 API 尝 试尽可 能走得更远，达到具体的 
叶子，不过如果找不到，则落到树中的其他部分。 

另外，一个给定设备的 WURFL 数据只定义了该设备 
(或设 备组〉 与其父设备或祖先设备不同的 能力。 这样 
一来， WURFL XML 数据文件吋以相当小（到 2011 年年 
中， WURFL 数据文件的大小略小于 10 MB ) ,尽管它 
包含的信息 贽确实 相当大。 


箱 Geek Bits - 

WURFL API 使用一个算法组合来避免一些奇怪的 
user - agent 小特例无法处理。 

WURFL API 查找匹配时采用的一种方法是，使用 
针对一个给定浏览器或设备家族优化的匹配函数 
( matcher ) 。最新的 PHP API 有二十多个处理程序来 
处理用户代理的分析。 

这个 API 首先确定对于给定的用户代理哪个处理程序 
最合适 • 例如，如果用户代理串为 “ BlackBerry ” ， 
就可以交给 BlackBerryHandler 处理。 

每个处理程序都非常了解其设备家族中用户代理的 
种种重要差异，这样一来， WURFL 数据维护者需要 
跟踪的特定用户代理数就可以大大減少_ 

PHP WURFL API 结合使用处理程序和 RIS 匹配（即 
串内归约， reduction - in - string ,也就是去除 user - 
agent 串中未识别的部分，直到得到一个确实能识 
别的 串）， 来得到其最终结果„ 



泫在你的 i 十萁机上安装 WURFU 

查看附录 iii ， 了解安装的详细信息。 
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从基础开始 


我们也玎 认建 i 一个资源管理贡面 

一旦安装了 WURFL PHP API , 只需要很少的代码就能构逮一个资 
源管理页面， rfrjR 与 SciemiaMobile 资源管理器页面相差无几。实 
际上，现在我们就要做这个工作。 



谙苓？.蜣然能遴过 ScientlaMobile 的资 
说管戌》贞#得到笮关设蚤的 WURFUI 患， 
我殳何必邺么麻傾邃立金 B 的蚯辜嚷？ 


自己动手建立一个资源管理页面，这会让你有 
机会具体使用 WURFL API , 另外可以使用你 
自己的数据文件中的数据。 

通过实践来学习，这才是上策。这申-我们会做-^ 

些基础3：作，可以在其他任务中重用（完成更多 
实际工作> • 

另外， ScientiaMobile 资源管理器页面是由 
WURFL 数据库版本驱动的。数据的存储和匹配 
会与我们将要使用的 XML 文件 -PHP API 组合稍 
有区别。关键是，数据在很少（不过有时至关策 
要）的几方面稍有不同。 

另外，通过建立你自己的资源管理页面，你很淸 
楚在从你的数据文件中获取数据，版本是确定的 
(不会更老或更 新）。 

建立资源管理页面的步骤 

Q 为 WURFL 建立工作环境.文件和配置。 

□ 写—些（样 板） PHP 代码初始 化一些 WURFL 对象，从而能访问当前 
浏览器和设备的能力信息。 


] 组织能力数据。建立一个页面，用一个 HTML 表格输出这些数据。 
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资源管理 页面： 建 交我们 的环璏 

第一步是组织目录结构并创建一个配罝文件。可以在 chapter 5 文 
件夹的 explore 子文件夹中找到一个配置文件作为起点。 

现在你应该已经安装并运行了 WURFL FHP API 。 要创建一个配 
罝文件（嗯，当然是一个能 it 常工作的配置文 件〉， 必须知道安 
装的位罝。 

资遇管 理页® 的目彔銶构 
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你已经安装了 WURFL (希望如 此）， 不过现在我们需要适当地进行配置，让它能够 
在我们建立的 web 页面中工作。为此，我们要创建一个配置文件。 

在一个文本编辑器中打开 COn fig . P hp . example 。 如下所示，编辑其中的路径，然后把 
这个文件保存为 config . php , 放在 explore 文件夹中（删除 . example 扩展名）。 



/* WURFL_DIR needs to point to 


the inst ‘ 

WURFL /'); 


nstall directory for WURFL */ 


/* RESOURCES 一 DIR needs to point to the resources dir you want to use. */ 

define l "RESOURCES DIR" . '/i>ath/to/WURFL/r«aourcaa/' ) : 


硝抵它电 .域， 


下垆制孑令 a 泛重用这个釔 2 


0 ^* 



7-# 忘记去对 exaiM ^ Lc^f ft % 
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好了！我们已经有了配置文件。现在要创建一些代码初始化 WURFL 对象，有了 
WURFL 对象我们就能深入了解设备的能力了，在文本编辑器中打开 device . php 。 
开始时这个文件很空，没有多少内容，所以下面插入一些关于 WURFL 的代码！ 

device . php 的工作有两 方面： 使用当前请求的 User - Agent 首部（即用户的浏览器）初 
始化 WURFL 对象，以及组织设备的能力数据，以便在页面上 显示。 


£拿我们扣逑的圮 



这几行代码会实例化几个 WURFL 对象，并为我们填充一个 
设备对象。 

这个代码块中大多数都是样板代码，本章后面使用 WURFL 时将根 
据需要剪切粘貼这些代码。如果你很熟悉 PHP ， 这些代码对你来说 
就是小菜一碟，不过，如果不熟悉也不用太担心。 
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能力纷争 

Exe^ciSe - 

下面来仔细分析163页上样板代码块中的最后一行代码。在这里我们告诉 WURFL 如何 
建立一个设备对象。我们使用了 $ user _ agent , 现在它包含请求客户 user - agent 首部 
的值。 

也就是说，我们要指示 WURFL 根据当前用户浏览器的 user - agent 串，尝试在其数据文 
件中找到相应的匹配。如果成功匹配，我们就有了一个设备对象，其中包含浏览器 
和设备的能力信患。 


$device 


$wurflManager->getDeviceForUserAgent ($user agent) ; 

-St ^ l) 


f . 兩 


"Q WURFL_WURFLManager 类中的 getDeviceForllserAgent 方法取一个 user- II 一 W 压常 ^ 
^ agent 串，并（由 WURFL 数据）返回匹配的设备，设备将作为一个 WURFL_ 


CustomDevice 对象 返回。 

㈣ 料 Ci 料 栽 们輪入-个峨 
^2我们-个 VSt ㈣ 冑料光了设 ㈣ 备个枝 


[7[ 建立 WURFL 工作环境，文件和配置。 

写一些（样板） PHP 代码初始化一些 WURFL 对象，从而能访问当 
前浏览器和设备的能力信息。 


| 组织能力数据^建立一个页面，用一个 HTML 表格输出这些数据 • 

既然有了一个已填充的 WURFL 设备对 
象，下面组织这个设备的能力倌息，以 
便在一个 HTML 表格中显示。 
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device . php 的第二个任务是组织设备的能力信患，以便以后显示。我 
们将在文件中增加一个代码块，按 WURFL 组来组织这些 能力。 

在 device . php 中加入以下代码，并保存。现在我们已经完成了 device , 
php 文件 



这个代砝幀分钼铂衣劣 射设备和洌玷 


0CtListof<^roups() ^ it 含达® 1 
W ^ FL .® 名构成的一个敢设••- 


. QttC^ablUtU&Nat>vu&ForC,rouyi () 

获 Kii 个雄中騎_钧力的名 f , 


$ dev ice = $wurf lManager->\retDeviceForU5erAgentj($user_agent); 

if ($davice) { l 

$groupa = $wur£lManager~>g«tListO£Group8(); \ 

$group«d_capabiliti«8 = array(); \ 

for«ach($groups as $a_group) { \ 

$grouped 一 capabilities 【 $a_group】* array(); y 

$capabiliti«s = $wur£lManagttr->getCapabilitie8NaiMForGroup ($a_group); 
foraach ($capabilities as $cap) { 

$grouped 一 capabilities[$a 一 group 】 [$c&p 】 =$d«vic •- >getCap«bility($cap) 


戏 fnciaci 个方法这间备个钧力的 
稍后2含爱邙 w 蟪介绍 a 



如羃你不裢宅1■理®这个0么 
也•: i 荀关系只電 t 第它4制 ！•) 
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>h? ExeticiSe 


现在我们已经完成了 device . php 。 下面要编辑 index . php 并增加一些代码。 


[7f 建立 WURFL 工作环境、文件和 配置。 

写一些（样板） PHP 代码初始化一些 WURFL 对象，从而能访问当 
前浏览器和设备的能力信息 


醒成 


□ 组织能力数据.建 立一个 k 面，用一个 HTML 表格 输出这些数 据。 

.o ^ ~ 

%ot) 这郝分 eat 作激 ii 个 

HP/HTML 


茂敎 ii 个工作 3 


违代理柃溪到 ( l^WKRFL 
祐力教轉（祜通铊识） ， 


村子 S —汨.用茂硪中各个敍力 
杓名扣成一个<讥；>， 


了砺 S - 子用户代理 和设 旮的 M #作 
到妃霣武 t 2 备 WwURFL IT >) 


<div id = ,, devicedata "> 

< h 2 >Device Data </ h 2> / 

<p>Device data for <?php print $user 一 agent; ?></p> / 

<p><strong>WURFL Device ID: <?php print $device->id; ?></strong></p> 
^ <?php foreach($grouped 一 capabilities as $group_name *> $my 一 caps): ?> 
<h3 class*"group"><?php print $group 一 name; ?></h3> 

<dl> 

<?php foreach<$my 一 caps as $cap 一 name => $cap) : ?> 

<dtx?php print $cap 一 name; ?></dt> 

<ddx?php print ($cap) ? $cap : '【no value】*; ?></dd> 

/ <?php endforeach; ?> f 如粟劣箱铤 力沒有 只钵值 . 則 S 


/ <?php endforeach; 
</dl> 

<?php endforeach; ?> 

</ div > 


wflUc ** (乇值）。 


\ 乜备个 < 椒 > 中 S 泽•在 
备个 S .T- it (t. 


OK, 继缕 « 进！保存 index.php , 并在你 
的浏览器中査看这个页面 3 
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现在可以在桌面浏览器中看到所有能力，这些能力分组组织。 


设备数据库和类 


[2 f 建立 WURFL 工作环境.文件和配置。 

从随访问当 


组织能力数据6建立一个页面，用一个 HTML 表格輪出这些数据。 



不过还玎认更好 

我们不希望只显示当前浏览器的能力（尤其是如果正在使用—个桌 
面浏览器，这确实没什么意思），下面让资源管理页面可以 显示任 
何用户代理的 WURFL 数据。为此，可以在 index.php 中加入一个简 
fe 的 HTML 表单，并对 device.php 稍做 一 点改动。 
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查看用户代理 


完成一个饿速的双连击，改 
迸我们的资源管理页面 

做两个简单的修改，我们的资源管理页面会 
变得更有用。 


i SERVeR .： ' PHPS 6 LF ，：基名箾狁^的舞本栌承^也 
ii 个褒辈 《«交到法稱贡® t 



<form me^hod s "po8t: v, action*"<?php print $_SERVER [ * PHP_SELF' ] ; ?>" 
id="uaeragentform"> 

<p>Test this user agent string:</p> 

<input type="text" name="useragent" id-"useragent — field M 


value="<?php print $uaer 一 agent; ?>" /Xbr /> 

<input type:"submit" namo=”submit" valuer"Test User Agent" id="submit” /> 
</form> 

</div> 





<f - 个 •) .表鞏 元许 龄入 



index, php 



卞 呻中.现 4 栽们奩名的左用户代理泉 
柔 本一个 徐入的表辈 $ (專 _ F > OST ) 中）《若 
釗.软认 為劣箾 •別％器的用户代疼 
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0保存所做的全部修改，并在一个 Web 浏览器中加载 index . php 文件。 

第一 次加载这个页面时，应该会看到你自己的浏览器的 WURFL 能 
力。 


o 尝试几个移动浏览器用户代理。 

在表单中输入一些移动浏览器用户代理，査看得到的能力。 


Mozilla/5. 0 (Linux; U; Android 2.2.1; en-us; DROIDX Build/ 
VZW) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile 
Safari/533.1 480X854 motorola DROIDX 




Mozilla/5.0 (webOS/1.4.5; U; 
AppleWebKit/532.2 (KHTML, like 
Version/1.0 Safari/532.2 Pre/1.0 


en-US) 

Gecko) 



o 

Jt 不 ft 厌倦了輪入 user-agent 串？ 

} ^6 laX 我们知道你可能已经受够 T 。 可以在 chapter 文件夹中找到一个 
^上 ueful _ user _ agents . txt 文件。这一章提到的所有用户代理都在 
这个文件中。你可以方便地从中复制粘贴。 
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使用 WUDFL 


拕迖些能力信患派上用场 



值用 WURH ■帮助 g 分沟容 


■*. 吋啷. 

们揉本 的。 


只有当 WURFL 指出这是移动浏览器时 （而 不只是使用 CSS 媒 
体奄询区分出窄屏 幕）， 我们才会在浏览器上显 示大大 的红色 
紧急按钮。下面会利用 WURFL 能力信息来实现（不过，由于 
你在使用桌面浏览器，所以肯定看不到这种情况发生> ! 

成功之踣 


创建一个配置文件，并增加一些代码初始化一些 
WURFL 对象。也就是说，得到当前设备的有关信+ 
息，以备使用。 ^ 

询问 WURFL 我们关心的一个或多个特定能力。 


| | 在 I’m Freaking Out ! 模拟 R 面中增加一些代码， 

根据能力值修改发布到不同设备的内容。 


- 个例孑中我们3绍 
拉 *5 扣何漱的这—東- 
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向 WURFL 问几个含适的问瓸 

我们在165页上简单地认识 T $ device 对象的 getCapability 方法。 

这是一个很方便的方法。即使你对类和实例之类的东西一窍不通，得到 
这些能力信息也不太难，而且我们会告诉你怎么做。 

要得到一个特定能力的值，如下 所示： 





动手做 I 


♦ 


将 config.php 文件从 explore 目录复 
制到 panic_button 目录。 


咧如. tstflbUt ' A 


卓 value 可钧 4 设备秣力作 （-个 

. **： aen 6. 

nkll 4 


我 n 曩问的 钫力名 
(一个穹苻蓽> * 


$device->getCapability <$capability_ 


3 轻 W 始化#油充的 
CA^tov^.X>CJitt % , 


举几个 例子: 


祆后哉们古沒 device .^i 4中宅 戎初诒 




ii 4 一个稃劫设> 喝: 


$value = $device->getCapability( 1 is_wireless_device') ; 


$value = $device->getCapability 「 cookie 一 support M; 

这个 SSS ( slh . il 条 ） 4 押 
^ cookU ^ : 

需要说明，获取能力值时，不用担心这个能力在哪个 组中。 

组是一个很好的组织槪念，不过每个能力都有唯一的名字， 

可以直接获取。不需要使用能力组与 WURFL 交互。 \ 


豸奢寿 M 笱 w ⑷翁力的馆忘？砩这问 


m 

panic_button 

\d 

1 


«薄。 


WHR.FL#e 1 


config.php 


1 

device.ph 

僅 

index.php 

1 

styles, css 


WUR - FL-tl ^ V ) 
诒化和刑试。 


device.php 

'o 

e ^ reaizi^Q 
out ! 携姒否 j ; 


目录和文件结构 
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问一问 WURFL 


抝始化设杳，准备好信息 

你会看到，我们在 p a nic _ buu 0n 文件 夹中为 你提供了一些帮助。 
device . php 文件已经包含了你需要的很多 WURFL 样板代码来完成后续工作。 

与建立资源管理页面时不同，我们会使用另一种方法实例化设备。这里不 
再使用一个 user _ agent 串并调用 getDeviceForllserAgent 方法，我们会告诉 
WURFL 使用当前服务器请求中的值（包含在总是可用的 PHP $_ SERVER 变 
量中）。 


9以3 林转译，详均我 D 块 供名箱 


$wurflManager = $wurflManagerFactory->create() ; 

$device = $wnrf!Manager->getDeviceForHttpReque8t ($_SERVER); 


l 软 5 user 邾外. ii 个方:•在 

、 2 含以另外几个 wrp 茫郏获珥韃 
. 不2 »<csck Mii 

它是移动的蚂？ 

现在我们已经有了 WURFL 设备。下面向它提问。 — 

缚丄•去象 

WURFL 有一个很好的基本能力，名为 is _ wireless _ device , 它能回答这 
个基础问题，这是一个移动设备吗？所以看来我们应该这 样做： 


_ f 去魷(象一个爰0 (甚如⑹屻问胜。 
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危险，威尔•魯滨逊 r 


在 PHP API 中，所有能力值都作为字符串返回。这说明，看上去是 
Boolean 型的能力 is _ wireless _ device 有3个可能 的值： ' true'、’false 1 


或 NULL (NULL 表示 WURFL 根本没有对应这个能力的值）。 _^ 

、奋 1> HP 中. 字苻竽 > u « •基个 

我们要更明确地指出到底是不是移动设备，否则值 Talse 1 会计算为 如梁伐; T .: 看心纟 

true , 非移动设备看上去就会像是移动设备，所以必须做一点修改， 只#璲用下®的 

将之前写的最后一行代码替换为下面的新版本： (* T -4 i 72 SX -*^ W ^ 


$ is 一 ph one = 

$is_phone = 
: false; 


$ de ^ 


>getCapflbility< 1 12 


re H e s s device 1 ); 


($device->getCapability('is 一 wireless 一 device 1 > 


(if 的三筹咢辑 <1 符表矛任必场宅全芩子穹符 
$ ， tm«! ’ （ 3P ； rm^« 会的真依）.淛试为 

nan . 


true' 



) ? true 


现在使用达个值 


device, php 


index . php 文件包含了 device . php 文件，所以我们可以访问之前 
写的代码。我们希望在 index . php 中增加以下 PHP 条件。 


<div id="content"> 


的子波认巧來 tl 稃功设备的碲求 (^44 ts _ 
<hl>I’m Freaking Out !</hl> w t rt Lfiss device baityfj «r). 

<?php if ($isjphon«): ?> ^ £ • 子紧含抬法 …… 

<div id= f, panic__button ,, > 

<img src="button.png" alt="HELP! n /> 


in 


index.php 


</ div> - - ……否則.只5 承窀 读咢砝 • 字法 

<?php else: ?> 很又 （邊过 - 个 ^ 5 _ 式设费） 


<h2>Help is only a phone call away.</h2> 
<div id="big_number"> 


503-555-2939 

</div> 

<?php endif; ?> 

<p>Pre-test late-night jitters? A math problem that just 
won f t budge? Our expert on-call tutors are standing by to help 
you through tough moments.</p> 

</div> 
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你快要发疯了吗？ 


试一试 

完成171页和173页上对 conflg . php 和 index . php 的修改，保存这两个文件，然后在一个桌面浏览器 
和一个移动浏览器中分别查看得到的 I’m Freaking Out ! 页面. 



个搞扭。 


AT&T 子 


10:37 AM 


寒石列圮器中沒车5=5=4个轄 fi ： 


尽嗲 I 一个彳东 


Pre-test late-night jitters? A math 
problem that just won’t budge? Our 
expert on-call tutors are standing by 
to help you through tough moments. 


Pre-test late-night jitters? A math pro 
just wont budge? Our expert onfall ti 

standing by to help you through tough 

_ 
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WURFL 闪亮登场 

本周话题： 

WURFL 有什么用？ 


记者 ：嗯， WURFL ， 你到底能带来什么？ 

WURFL ： 很显.然啊。你可以立刻区分出浏览器是不 
是移动的！ 

记者： 要知道，还有很多其他方法也可以做到这一 
点。比如说，客户端检测，基本服务器端检测等。 

WURFL ： 确定移动还是非移动，这只是小儿科。你 
还没有允分发挥我的潜力呢。 

记者： 好吧，我试试。 

WURFL ： 那你按我说的做，在 iPod Touch 上看看这个 
页面。 

记者： 好的…… （ id 者开始在移动设备抽屉里翮找， 
停顿很长时间之后>……哎呀，出现了大红按钮。 

WURFL ： 这是不是说明 f 点什么……嗯，可能不是 


你想要的吧？你什么时候能用 iPod 打电话？ 

记者： 没错。这个按钮出现在 iPod Touch 上一点意义 
都没有。现在我们又回到原点了。 

WURFL : 不，完全不是这样。就像我说的，你还没 
有完全发挥我的潜力呢。再深入挖掘挖掘我的能力。 
我想你会有一到 两个新 发现。 

记者： 不过，你有500多个能力啊！我怎么找到合适 
的那个呢？ 

WURFL ： 你是在抱怨我太过丰富了吗？唉，真是无 
语了，我简直没有对的时候！好吧好吧，给你个提 
示： 按钮出现在移动设备 h 并不表示它真的会拨电 
话。你还没有连接呢，所以它只是个漂亮的 ra 片，根 
本没有功能。你可能想到这一点了，再来看呑我的能 
力。 



# tB .•:$ ■在 <4 迨义 



查看我们的资源管理页面，研究 iPod Touch 的能力（我不希望按 
钮出现在 iPod Touch 上）， 与 Android Nexus S (我们希望在它上 
面显示 按钮） 的能力做个比较。你还可以看看桌面浏览器.做做 
比较。 


你能找出一个能力帮我们区分移动（或 小） 设备与真正的手机 
吗？ 


Mozilla/5. 0 (iPod; U; CPU iPhone OS 4_3_2 
like Mac OS X; en-us) AppleWebKit/533.17.9 
(KHTML, like Gecko) Version/5.0.2 Mobile/8H7 
Safari/6533.18.5 


Touch utA 


Mozilla/5.0 (Linux; U; Android 2.3.3; en-i 
Nexus S Build/GRI40) AppleWebKit/533.1 (KHTML 
like Gecko) Version/4.0 Mobile Safari/533.1 


o 
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打电话还是不打电话 



WURFL bearer (承载）能力组有一个漂亮的能力，名为 has _ cellular _ radio 。 我们会查看这 
个能力的值来得出当前请求是不是来自一个手机（而不只是任意的移动设备）。 

我们还会认识一个 xhtml _ make _ phone _ call _ string 能力，它会向我们展示如何为这个设备创 
建最好的可点击的电话号码链接。 


利用 WURFLii ： 页面 E 聪硝一些 

通过测试 has _ Ce U U l ar _ r adio 的值，我们可以清楚地丫解当前用户是不 
是在使用一个手机。我们还需要知道如何链接电话号码，使用户 -a 
单击这个链接，就能立即拨出电话。 

xhtmljnake _ phone _ call _ string 中的值可以为链接电话号码时应使用的 
语法给出一个提示，得到这个提示后，用户单击链接时，手机就知道 
要拨出电话。对干 Nexus S , 这个值是 tel :。 

对于 iPod Touch ， 这个值是 none。iPod Touch 不能打电话。桌面浏览器 
也会返回 none 值。 

通过结合 xhtml _ make _ phone _ caU _ string 中的值和我们要拨的电话号码， 
就可以创建一个可用的链接。 

用链捿拨电活 


如粟 has ccUuiar radioH 力作 4 
true . fc 

⑶ ll 糙力珩 一 个有用的化.杖芍以 
汄泠4 一个孕杌？ 


移动手机浏览器会把链接中的某些 UR1 模式识別为电话号码。用户单 
击这种链接时，会弹出一个提示框，要求确认他确实想拨出电话。 

teh 是最常见的电话号码 URI 模式，适用干几乎所有现代智 能手机 。不 
过，使用 xhtml_make_phone_call_string 字段中的 WURFL 值没有坏处 

(反正你已经得到了这个值> e 最后我们会 得到： 紹冰; r.f 家代砝 (+ 幻。 不过; 6 

) 鼉妗加丄代铋，另4 
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可以在 device . php 文件中另外包含一些测试，査看 has _ cellular _ radio 和 xhtml _ make . 
phone_call 一 siring 值。 


$h & •一 radio 
$phone_s tring 


$devic •- >getCapability (' has—cellular 一 radio 1 >; 
$device->getCapability (• xhtml 一 make_phone—call_string •}; 




none ft —个有含义的值！ 

还记得 173 页曾经指出， PHPAP 1 中， CustomDevice > 
r atch s etCa P ab 出汐()可能返回—个字符串（如果提供了这个能力的 

* 值）， 也可能返回 NULL (只有当 WURFL 根本没有提供这个能 
力值时才会返回 NULL ) 。二者的区别非常重要。 

对干 WURFL 能识别的类似 iPod Touch 和桌面浏览器等设备， xhtml . make . 
phone _ caU _ string 的值都是字符串 'none ' 0 如果把它处理为 PHP 中的一个 
Boolean 值，就会被评判为 TRUE 。 
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拨号问题 


tiiereiare no 

Dumb Questions 


1^) I 难道移动手机浏览器不会自动 
识别电话号码并帮你接通吗？ 

¥:大多数情况下确实会。不过有两 
点要注意。对于我们目前的情况，最 
重要的一 点是： 我们的链接是一个图 
像，而不是一个电谙号码 • 这里没有 
文本。手机很可能无法识别。 

另外，不同手机准确识别电话号码的 
能力并不 确定 。 Opera Mini 通常会把加 
4位编码的邮政编码当作电诂号码。试 
图向一个邮政编码拨电话会有严重的 
后果，你应该能想見。 

另外要记住，我们的电诂号码格式相 
当规范 ( + 15035552329) . <5有人可 
能希望在链接文本中显示一个稍有不 
同的字符串，还自信地认为键接本身 
会正确地格式化. 


为什么用户点击一个电话号码链 
接之后必须弹出那个确认框？为什么 
不直接拨号？ 

这是为了保护用户不上当受騙. 
可见的电话号码链接可能有一个号码， 
而链接本身却有另一个号码 u 一冬可 
怜的家伙以为他们在打电话取消订阅 
当地报纸，但实际上可能在给某个蹁 
子打电话. 

在这里，我们甚至没有显示电诂号码， 
有人会认为这并不是一个最仕实残. 
我们也可以使用一个 CSS 背景图像而 
不是一个在线图像，让电话号码作为 
文本显示在链接中，并在 CSS 中使用一 
个很大的负边距值隐藏这个文本。 

用英语解释好吗？我大学没有主 

修 CSS 。 


这么说，我们认为如果浏览器的 
xhtml _ make _ phone _ call_string 有一 
个非 none 值，躭说明它 在一个 可以拨 
电话的移动手机上.不过怎么知道呢？ 

$: WURFL 有一些“甘能”数据， 
但还不至于那么聪明（没有人能那么 
聪明）。没有一种明确的方法可以绝 
对确信一个用户在一个有效的蜂寫网 
络上（而不是 WiFi 或者其他网 络）， 
否則没有其他方法能够防止拨出电话 # 
不过，实际上这对我们很有用。 

:我们不能只测试 xhtml _ make _ 
phone _ call_string 值不为 ’ none ’ 吗？ 
测试 has _ cellular_radio 是不是多余？ 

你可能有点想法，不过也许只是 
自作聪明。 


^ 丨 使用一个很大的负左边距值 你说自作聪明，这只 ft 在搪塞 
(例如 margin - left : - lOOOOpx ) 是 一种让 我，不过我確实想更多地了解 WURFL 
文本从左边消失不可见的方法•我们 对象和 API …… 



rm Flaking Out! 

only* phone 

- 


503-555 

2939 




Prv-t««t Ute>nifht jitUrrn? A math 
prohiem that jwt won't bod^e? Our 
expert on-call tutors are standinc fcn 


fiq>ert on-call tutors are standing by 
to help you throo^h tough momenta. 

^ . ... 


希望这个文本出现在炬左边 10000 诹素 , 

的莱个位置，就像溧浮在办公室的空嘿，我们真心建议你去看看 API 
\中 # 当然， 这样确实有 点怪. 中的 PHP 类，了解它们是如何一起工作 

的 ,如果你安装了 API , 应该已经有这 
些文件了，快去看看吧！ 


tPdrf Touch i* 爯泛右： i 现.拉?£ 了 ！ 
不 (2 i ： 接往 C 3 样 1 f S 方 1 
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Jim ： 这会失控的！在一个更复杂的项目中，或者甚至在 Acedlt ! 网站 
中，如果增加电多移动细节，看起来要在代码中到处使用分散的单个 
WURFL 能力，这会导致大屋:问题。我的意思是说，如果最后在要一个 
模板中测试 一个 能力，而在另 外一个 地方测试另一个能力……如此等 
等，那可太槽糕 r ! 

Frank ： 我 N 意。看来我们要为每一种可能的能力组合发布一个不同的 
网站（可能只是稍有不 N ) ，这对于考虑和测试来说绝对是个恶梦。 

Jim ： 没错，这样只可能得到一种“通心粉式”的代码。 

Frank ： 不过.我不希望摒弃整个槪念。尽管我愿意尝试在客户端完 
成特性检测，而 R 希望我们的内容尽可能提供响应性，但看来利用 
WURFL 之类的设备数据库，我们可以更深入地了解-些细节，而这些 
通过其他途径可能无法得到。 

Jim ： 不过，如何把所有这一切都赶到“畜栏”毕 .， 而不是分散得到处 
都有？以免我们发狂！ 

Frank ： 看起来，如果能对设备逻辑分组，而不是逐个地测试能力，我 
们就能保持淡定了。还记得吗？最近我们曾经花了一些时间考虑如何 
判断要支持哪些设备，我们的做法是选择一些特性，并对不满足要求 
的手机划定界线。 

Jim ： 没错。我还对那些练习念念不忘呢！ 

Frank ： 看来我们可以更进一步，可以创建一堆设备，不过要归类到我 
们决定支持的设备组中。 

Jim : 有意思……我想你可能有办法了。 


用177页上的内容修改173页的代码，修改了 device.php 之后.你可能 
会发现你没有一个 iPod Touch 来测试这些修改。 

要査看 iPod Touch 会看到什么，可以编辑 device.php 文件。使用 
getDeviceForUserAgent () 方法而不是 getDeviceForHTTPRequestO 方 
法，它会给出一个 iPod Touch 用户代理。 

焱蓽 芍以我 fO — 

个 iPod Touch 用 乡代 ?！ 

- ► 答*见第 180 页。 
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设备类畜栏 


故牧设备 

珙令炙丧 袁大—祖诶令 
特惟的—个抽集笫令。 


一旦牧民发现某个牲畜«于这3组 之…， 他就能做出进 
一步的决定，而不用査看更小的细节。他可以给马喂燕 
麦，而不用停下来反复确认它们的腿是否有一定长度或 
者有长长的马尾，或者是不是能支持 PNG 图像（当然， 
所有人都知道马并不支持透明 PNG ) 。 


设备类就像创建 f 一种逻辑畜栏，可以把有某些共同点 
的设备赶到这个畜栏中。 

牧民可能把花点奶牛关在一个牛圈里，把大块头的马放 
在另一个马親里，而小猪仔则放在 另外个 猪圈里（就 
好像我们当过牧民一样），类似的，我们也可以把设备 
分类到虚拟的设备类小房间里。 

一 E 分类，继锬前逬 



他已经知道它们是马，因为它们都在3歧里。他不用单 
独喂祚毎一个牲畜（这需 要跟踪大最马 料）。不过，与 
此同时，他也不会给小猪喂燕麦。 


初始化 WURFL 设备时，通过使用设备的用户代理可以测试向一个给定的设备或浏览器发 
布哪些内容。 


$wurfIManager = $wurflManagerFactory->create(); 



$user_agent = "Mozilla/5.0 (iPod; U; CPU iPhone OS 4 一 3 一 2 like Mac 
OS X; on-us) i^>pleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 
Mobile/8H7 Safari/6533.18.5"; 

$device = $%#urflManager->getDeviceForUserAgent($user_agent); 

device, php 
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设备类 

之前我们已经了解到，可以根据一个设备数据库执行到来的 
请求，来得到设备信息。通过将对影响当前网站的能力和值 
进行分组，可以让内容适应整个设备类，而不是追踪紐-个 
能力的值。 


这些设备类定义（将转换为代码）将设备划分到某个组 。一 
旦对设备分组，我们就能采取相应的行动，而不用跟踪每 • 
个单个的能力。 


在个似 茳的 例孑.设备钊分利以下4 


个通中 





4 it. 


樣 H —个设备數轉 
隹狁行到癉 的璜求 


代砝棵44 1. 4备辁旖 讲料设 备西釔 
嘟个设备类 .. 


中秘梦钧孕仇六名 


=•勹 

14■分木衿（炎 
似吁蓽4辈中的分界 


7濤足昝本 t 求的议畚 
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开始提供学习辅导 


让务坧展 



嚏.伏奸们。并令*森飧钮的闷*处瑁浔不 
能不能爯帮我们一次，我们正在构遠一令大型的 
新 R 站，陡馆我们对它完成稃动 tt 化玛 7 


扩犬 Acedlt ! 的让务笵® 


Acedlt! 开始向 学生们 销售学习辅异资料，并为此建*了一个 
独立的 网站。可以看到，类似闪卡、练习测验小册子、参考 
书之类的东西很好卖，不过目前要购买这些东西，唯一的办 
法就是通过印刷出版的图朽 H 录。 

该冇所改变了。 Acedh! 建*了一个专门针对学习辅异的新网 
站，不仅允许用户在线购买所有实物产品，还引入了一些在 
线产品，如闪卡，可以直接在网站上交互式使用。 


揸前看看到底要揸供一个怎样 的闷蛣 



■AewOti 的孖亀人男 
在用 JavaScript 知其 
的彷 :llvv(sb 技术构 


现在还太争。 Logo 设计还没有最后敲定，内容还在审定之 
中， W 外设计也还 只是处 千简单的模拟阶段。不过先来看看 


Acedh! 到底要建立怎样的网 站: 



Acedlt! $tudy Aids 


以刪 公 ㈣ 


縛钤实嫌舁料枓 

迻死 ( i 个闽玷上 
的交 s 式 A 兵 


Acerfit ' i ^ ij 过一个 
: if •島的 Flash 祝戏畫 




人 


扣紐本运啥舛 f ?〕 


〒兵 .二 
地碣究 •) •趙 


Am«w buuiw tinuu* an armbrnt \aibnh VMS tn |M>n tauusv tr»fi tee Cziio ptuk oillMmtMit «n> iKtuuaaan. 

'■■TMni bmnl <nu?*r*a <pjun4 ntya lanin jxfk wK tnirdua .i|i}>tnrf Inmo mt t«nw* viM mil «mn(>Unni 
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戴上移动浓铳评判达个主页 


这个新的学 N 辅导网站涵盖的范围要比之前那个紧急按钮页面大得 
多。如果逐个能力地规划开发工作，会让我们发疯的。要制定开发 
方法，使这个网站适用干多种不同的用户，一种办法就是使用设备 
类对不同的体验分组。 

銥含设 杳数椐和還輯 分组 



定义设备类的过程与我们在第4章做的工作相关。要査看当前任务， 
明确哪些方面比较重要，念几句咒语，找出与一般原则相左的情况。 

我们知道，“使用设备类对体验分组”这句话意思很含糊。下面首 
先再来看看这个模拟豇面，根据我们对移动 Web 特性和约束的了解 
明确 Acedlt ! 的优先级。 


好乇.知道：？我 fOUC 杏 O 右一个 
柁略的俅 鉍田承 1 蜉孖 佐起 ♦ 了汶 
2个珀0汲差的尨麥……矗终 脅玄含 

5广， — 



Audits ：t « . 闲玷 
X :的4•至式无棄尤# 

t 


9以光放 内瑢. 4 •龙•芩托舴分砭 
^ t 么祚劫 4 易蕞 下方的 cdf 




^ ^va^cri v t 

由 XML . ^^ ro ^ ous . 


4成闷跬的我 Ctf 
鈐栉鉍 til 备另找一# 


^ <f Ipf. etic^ss 
轉式. 4打权 蚵苟设 
备 I : 邾芍用 - 


戏们 笱舴 4 t 砝功趵 饵客系 
不& 沒否® i 态戏沒 罹苒中 


Ac^rtim)；f f 屢 衿移功 
用户 $ •子 ii 咎 r f 


碎 t . 玛站的 f 个广鲁郝 
分年淡 乇爸 让人:*4外么 


的内審. 
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肥胖设计与纤瘦设计 


将熏孝分组为多种移动体验 

完全的交互式网站体验有一呰很髙的要求。移动设备需要提供 JavaScript、HTML 
和 CSS 支持，智能手机卜.较新的时髦浏览器通常都会提供这些支持。具体来 
讲， AcedU ! 开发人员所针对的就是这样一类移动设备，要求运行基干 WebKit 的浏览 
器，并为屏幕宽度不小干320像索的设备而设计。 

不过这并不表示其他人会被冷落。 M 站也欢迎那些比较小的、不那么时兴的手机。 
这些手机的用户可以在在线商店购买实物产品，还可以访问网站的其他板块。只是 
他们无法得到一些商级的特性，如完美的交互式体验或核心 CSS 。 

我们并不只是向满足最低要求的设备发布内容，也不会干脆排除那些不满足要求的 
设备，下面创建两个不同的网站，分别适应各组设备。 


犛的屬事 I :看起来 


.Mer*i iwntf Bon^wuiw lUfM 

Dvmtrxt IVn»m<o«* >Wtmfnguraro«M 
puna. t>a» item md amu JUtam 

enpsihi(tt>WJK«Hn(«rnu& Onnaeorwr 
am Id «ra(. Alijyan Uhrien mitltriatur mm h> ] 
M Wh. un iu ft r mi. orwr* «l onwf. MMr4um 
m(, mtmtrk. Cnara dUn—Wi man». 

fc_，—j pw 



更丰富的移动体验 

通过创建一个设备类来涵盖更丰富的移动体验需求，可以设 
计一些相当漂亮的东西，而不用担心低档设备缺乏某些支持。 

通过指定这一类设备必须有一个基于 WebKit 的浏览器，可以 
相当自信地使用梯度之类的 CSS 特性。我们还可以利用某种程 
度的高级 JavaScript 支持。 

面向简单手机的简 化体验 

如果设备屏幕比较窄，能力不太强，就要 更格简 一些了。不 
能假设它支持所有现代浏览器的特性。 

这个更简单的布局不再提供在线商品的链接，+过用户可以 
在在线商店里购物。这个版本在大约176像素宽的屏幕上可以 
工怍得很好，如果屏幕小干这个宽度，就很难看清商店里商品 
的图像了。 


备个设备类1 ff 沃的 


现在我们对两个移动设备类 higher_ 
mobile 和 simpler_mobile 已经有了大 
致的认识。 


simpler_mobile 
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设备类排排坐 

现在我们对要构造的两个移动设备类已经有 f 大致的认识，还 
有什么呢？ 

噢，对5，还布乎板电 te 

Acedh ! 的开发人员还为他们的在线商品提供一个针对平板电脑 
优化的超级漂亮的触摸式界面。这个工作还没有完成，不过他 
们希望现在能识别平板电脑，为网站的最后发布做好准备。 

在啷里划分界线 


对干 Acedlt ! 开发人员来说，他们的访问者应该可以在线购物, 
或者可以使用在线商品，这一点很重要。如果由于设备限制， 
导致访问者既不能在线购物也不能使用在线商品，就认为他们 
使用的设备和浏览器是小'支持的 （ unsupported ) 。 






支抽。 


公司的电子商务软件要求提供 cookie 支持，还要有一点 
JavaScript 支持（远不如在线交互式商品所需的 JavaScript 支持） 
。另外，为安全起见，还强制要求设 备支持 SSL ， 


我们的设备类阵容 



基于 WebKi 的浏 
览器，屏幕宽度 
至少为 320px。 


higher_mobile 


嚅，桌面浏览器 
是一个设备类！ 



desktop 



simpler_mobile 

最低 JavaScript 支持， 
屏幕宽度至少 176px。 


对了，还有 
平板电脑。 



是否不满足某个绝 
必要的特性？ 



tablet 


unsupported 
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设备类访谈 



设备类闪亮登场 

本周 访谈： 

抽象到具体 • 到底什么是设备类？ 


有点困惑的 Web 开发人员（以下简称为 SCWD ) : 

我实在搞不清这个设备类到底是什么。一堆能 
力……与某种体验关联？ 

设 备类： 我承认，掌握我是有点难度。如果我是 
— 幅画，我就是那种抽象画。我是一个概念，一 
种组织共同事物的思路，这样我们可以只创建几 
类网站，而不是创建上百万个不同的网站。 

SCWD ： 这么说，设备类就是一组 WURFL 能力 
喽？ 

设 备类： 别那么快下结论。要记住，我是一个抽 
象槪念。尽管这里我们使用了 WURFL ， 不过实 
际上并不要求你使用 WURFL 。 其实甚至没有必 
要非得使用设备数据库。 

SCWD ： 开始有点不明白了。你能帮我解释-* 
下吗？ 

设 备类： 好吧。下面我们一起来做个计划，对于 
Acedh !， 共有5个设备类。 

SCWD ： 这是不是意味着我们要为每一个设备 
类建立一个网站版本？听上去可是个大工程啊。 

设备类 ：不， 我们只强调它们的不同。例如，启 
用新的针对平板电脑优化的触摸式闪卡界面之 
前，网站的平板电脑设备类版本与桌面版本只有 
一点不同：它不会使用 Rash 内容。 

SCWD ： OK , 这么说我们有一个桌面设 
备类，它的含义很明确……还有平板电 


脑设备类，只是稍有差别 …… 嗯，我看 
看。那么 higher_mobile 和 simpler_mobile 
有什么区別呢？ 

设备类：我们都知道， higher_mobUe 表示这 
一类设备有较大的屏慕，另外有能力很强的 
基干 WebKit 的浏览器，我们可以很自信地认为 
它们有足够的能力处理网站中强度更大的交互式 
特性。 

simpler_mobile 正相反，这一类设备只有比较 
窄的屏幕，另外浏览器可能不太先进。我们只 
能给它们比较小的图像（相应的，带宽也比较 
小）。 我们知道它们只支持一点 JavaScript , 不 
过可以提供一些不太华丽的内容。 

SCWD ： 等-•下，我们怎么知道 simpler_mobile 
设备支持 JavaScript 呢？ 

设备类：我们会测试至少有一点点 JavaScript 支 
持。如果设备没有在页面加栽之后修改 DOM 的 
能力，就会完全撇入 unsupported 设备类 0 

SCWD ： 那么接下来要做什么呢？ 

设 备类： 我们需要把适当的 WURFL 能力和值映 
射到我们想要创建的设备类。有了设备类的逻辑 
表示之后，再创建代码来完成一些具体的测试和 
归类。 
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池塘谜题 



来为我们的设备类找出正确的 WURFL 能 
力和值。你的任务是从池塘里取出 
WURFL 能力和值，把它们放入空的 
设备类中。同一项不能使用多次。 
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池塘谜題答案 

现在我们已经收集了适当的 WURFL 能 
力和值，可以建立我们的设备类 
3 了。 
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therei^re np 

Dumb Questi9ns 


为什么要强调基于 WebKit 的浏览器？开发人员 
不軎欢那些漂亮的移动浏览器吗？ 

在很多移动 Web 开发人员看来，基于 WebKit 的 
浏見器相当高级，也很一致^有 WebKit 渲染引擘的浏 
見器一般都能很好地支持 HTML 5、 JavaScript 和 CSS 3. 

注意上面这句诂中的“一般”这个词。问題在于，对 
于基于 WebKit 的浏見器有多一致还存在误—个让 
人遣憾的事 实是： 这方面还相当 混乱。 

移动平台战略家 Peter-Paul Koch 在他的博客 QuirksBIog 
( http :// bit . ly / uWnFLa ) 中发表了一爲分析相当全面的博 
文 “There is no WebKit on Mobile ” ，清楚地拍出了攸 
设移动 WebKit 浏見器一致性存在的种种问題。 

这么说，移动 WebKit 实际上并不怎么样，为什 
么我们要让设备类基子它？ 

¥:不论是否一致和可靠，基于 WebKit 的洌見器是 
开发人员完成开发和进行測试的平台。項目已经进行 
到这个阶段，再拋开它就为时太晚了„对于这个喟目， 
我们还是沿着这个方向继续前进吧。 

;为什么测试移动浏览器名为字符串 ’ Safari ' 
或 Android ’就等于査找所有 WebKit 浏览器？ 

:应该还记得第3幸曾经说过， user - agent 爭很聪 
明. 关于 WebKit , Apple 公司历史以来一直都在使 
用沿袭下来的 user - agem 串.写这本书时，所有已知 
的 WebKit 浏览器移动版本的浏 1 L 器名都是 “ Safari ” 
或 “ Android ” （是的，甚至黑毐.诺基亚手机和一些 
不知名的手机上的 WebKit 洌見器也是如此）. 

如果我在项目中使用设备类，都必须建立 5 个设 
备类吗？ 

¥:当然不是 • 你可以有10、4个，甚至一个都没有 8 
设备类越少 意味着 复杂性越低.设备类越多说明差别 
越多。 


I higher_mobile 和 simpler_mobile 的名字有什么 
说法吗？有没有我需要了解的命名约定？ 

^1%. 我们只是随口这样取名的。这徉听上去起 
码含义是正确的。这里使用下划线的目的只是为了能 
史容易地把名字转换为代码。你可以对设备类取你喜 
欢的任何名字，只要合理就行。 

既然有了设备类，我再也没办法测试单个的设 
备能力了吗？ 

¥:券然还可以測试单个的 能乃。 实际上，对于前 
面的緊急按钮问題，就采用了这种解决 方案： 我们測 
试了一个非常特定的能力的值.对于同一个设备类 
中的不同设备，这个值就可能不同（例如， iPhone 与 
iPod Touch 相比，这个值就不 同）， 

I 一个设备不能匹配多个设备类匹配吧？ 

不能。我们需要很仔细地安排设备类測试代码 
的順序。第一个匹配的设备类就是我们指定的设备类。 

我在代码示例中总看到 CustomDevice 对象，这 
到底是什么？ 

^^CustomDevice 是 WURFL API 中表示设备及其特 
性的一个类的类名。 

R ^看来设备类不只是一个移动 Web 槪念。 

刍然不是！内容和布局调整是整个 Web 都要考虑 
的问題。这可不是移动 Web 专爲的轆念。 

R ^ OK , 太好了。我已经把各个设备类的能力和所 
需的值放到一些圆圈里了。现在做什么？ 

舳开下一页.你可真性急。下面就要开始把这 
些设备类转換成代码。 
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分组 


实际演练 

现在要把我们分组的抽象槪念转换为真正的代码，能够对设备进行检 
测，归入适当的设备类。下面开始归类吧！ 


_ 

device.classes 

L_ 

test 一 classes 


不过. t 先…… 

找到 chapter 5 中的 device _ classes 文件夹，然后找到它下面的 
tesLdasses 文件夹。找到了！这就是我们现在的演练场。 

你可能感觉这个过程很 熟悉： 我们需要建立一个配置文件， 
从而能初始化 WURFL 。 先从 panicJ ) utton 文件夹把 config.php 
文件复制到 device _ classes / test _ classes 。 


hi 

config.pl 

-1 


config.php 与？滅較你的 i fV 我 fO 
甲你 t 成个 


device.php 


我们要完成认 7工作: 



后面几英坍含坩加这个 

a .4. 


□ 编写一个 ( php ) 函数，测试各个设备类定义中我 
们关心的单个设备能力。 


device_classes.php 



—个滴荤 的刑试毋面芍 
以餘入用户 代理. 奢着它们押 


index, php 入啷个设备类 


□ 将各个设备类的能力需求转换为代码中的条件 ( if / 
then ) 语句，从而能确定当前设备应该分配到哪个 
设备类。 


L 圍 

styles, css 


□ 编写一个简单的测试页面（类似于我们前面编写 
的 WURFL 资源管理洱面），査看不同的用户代理 
会归类到哪个设备类。 
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熟悉區 紀蚤数 

你会发现已经为你写好了这个匹配函数，就放在 devicejiasses.php 中。 
创建各个设备类的测试时可以直接使用这个函数。 

使用这个匹配函数之前，有几点需要告诉你。先退一步，请看下面给出 
的一些 PHP 代码。 



成品 

PHP 








磘係 a 备的象存存 


M 




function device 一 match($capability, $comparison, $value) { 
global $device; 
if (!$device) { 
return FALSE; 

) 

$device 一 value = $device->getCapability($capability); 
switch ($comparison) { 
case ': 
case ' =*== 1 : 

return ($device_value === $value); 
case ': 


« 试比 较设 畚的•士 
箱 ffi . , 



这个函数返回一个 

TRUE 或 FALSE 
( Boolean } 结果，表 

示给定测试是否通过。 


return ($device_value !== $value) ; 
case '> =, : 

return ($device 一 value >= $value); 
case •<=**: 

return ($device_value <= $value); 
case *>': 

return ($device 一 value > $value); 
case 1 <': 

return ($device 一 value < $value); 
case 'LIKE' : 

return (strpos ($device__value f $value) !«= FALSE); 
case 'NOT LIKE*: 

return (strpos($device 一 value, $value) **= FALSE); 
default : 

return FALSE; 



device_classes.php 
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更进一步 


达个 switch 语句在做什么？ 


掉 0 苻.采用不罔 
方式宄威 4 螫箔栌 
比校 C 


4.d^iu v«ue4-i«ilfr 中我 们矣 o •的和 
个 ft 力的值 • 


switch ($comparison) { 

f 


$value ); 


case •== •: 
case *===• 

return ($device_value = 
case '!=' : 
case *!==': 

return ($device 一 value ! 
case *>=': 

return ($device 一 value >= $value); 
case *<=': 

return ($device_value <= $value); 
c&se *>*: 

return ($device_value > $value); 
case : 

return ($device 一 value < $value );,T 
case •LIKE •: _ U 

return (strpos($device_value, $value) 
case f NOT LIKE' : 

return (strpos($device_value, $value) 
default : 

return FALSE;< 


$vaLLie); 我 O 想書比 


朽用 Uk-^ljo NOTUk.6 
元许 芍以宅成蚺（子毐） 


FALSE) ; 
FALSE) ; 


举几个例孑 

如粟 t.Jl 旮 ^rcsoutlo*^ 

似 ( 象嚤威更 •) •，这个 
删说 ;I 过 (Cfi QTTT?M 6 <fc)- 


如戛專不袅一个 
芍 5 利的比较确 A 捋.涮试 
吏致 . 



I device_match (' resolution_width ' , 

，<=•, 

'240'); 






如篥， : 泛备的 Kvujbiic brows«〆 右芭 
含章符璆 ， safari ’ . Ci 个 iW 
试 Ji2L 一 ^ 

device match('is_ 

•wireless 一 device* , 





device match('mobile browser ', 'LIKE 1 , 1 

Safari *) ; || 


dtvictd 4 .和 Ue *• (i 个涮 
试逋过， 


'false' 


192 第 5 章 




设备数据库和类 


使用 g 紀蚤数测试能力 

现在我们有了一个可以用来测试能力的函数。下面把前面要求的必 
要能力转换为测试。 

[7 f 编写一个 ( PHP > 函数，测试各个设备类定义中我们关心的单 
个设备能力。 

□ 将各个设备类的能力需求转换为代码中的条件 ( if / then ) 语句， 
从而能确定当前设备应该分配到哪个设备类。 

□ 编写一个简争的测试页面（类似干我们前面编写的 WURFL 
资源管理页面），査看不同的用户代理会归类到哪个设备类。 


提醒： 我们鼉后建立的 
设备类分别是 desktop 、 
tablet. higher_mobile 、 
simp_er_mobHe 和 
unsupported 。 各个设备类 
要瀏试的能力已经在 188 页的 
池塘谜 H 中磽定。 



txeftciSe 


我们已经为你编写了匹配函数，不过现在该你做些工作了 a 下面哪些测试厲于哪些设 
备类？ 


if (device match('resolution width *, •>=*, ' 320 1 )) 


if (device match('resolution width', *<', *176*>: 


if (device match (' is wireless device', »====’， ' false 1 )) 


if (device 一 match<'mobile 一 browser•, 'LIKE*, ’Safari*) | | 
device 一 match(’mobile 一 browser *, 'LIKE', 'Android')) 

if (device 一 match(*cookie 一 support *, •===•, * false*" 


if (device match(* is tablet *, *===’, 'true')) 


if {device 一 match<*ajax_manipulate_doni , , '=== 1 , 'false')) 


if (device 一 match(•https_support ’， •===», 1 false 1 )) 


if (device match(* resolution width*, •<*, *320')) 
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练习答案 


我们已经完成了这些测试的归类！现在该把它们转换成真正的 PHP 代码了。继续前进吧！ 

EjceRciSe 

SotutiOH “ 

惑 tea ?軲袅对左求 ¥设备类的一个牙) 

试 . 不 (2 il C2 赍希 k_wir^«ss device 翁 
力弒戧 iffP 獅辁求 i ； 沒备类 …… 

. .^. ， l 3. r -^.°i f (device_match (' resolution_width', •>=•, , 320 , )) 

u^ux^ovttd 

. if (device_match( 1 resolution_width', •<、 * 176')) 

. if (device_match (' is_wireless_device ', »===*, ' false')) 

Wl(?Mtr_v^oWllt 

. if (devicematch('mobilebrowser 1 , 'LIKE*, 'Safari') || 

devicejnatch('mobile 一 browser•, 1 LIKE', 'Android*)) 

.. if (device—match ( 1 cookie—support •, *===*, 1 false')) 

tablet 

.if (device 一 match('is 一 tablet 1 , •=*=*, 'true')) 

.. if < device 一 match < ， ajax_manipulate 一 dom*, ' =====', ’false’" 

. •.… if (device match (’https support •, ’===*, ' false')) 

. . if (device match ('resolution width’, '320 # )) 


该汇总代码了 
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r^^rpen your pencil 


熟悉 PHP 代码吗？看看你能不能填入这里缺少的代码块。这些是 
已经分组的设备类测试，已经万寧俱备了。 


$device 一 class = NULL; 

if (device—match(*is_wireless_device* , ’===•, •.')) { 

$device_class = 'desktop'; 


else if (device 一 match (• https 一 support ’，*.*, •.') || 

device match 《 *. 一 3 叩户 01 ：仁 •，•.•，’•.]) | | 

device_match('ajax_manipulate_dom', *===’， 'false') || 

dev ice 一 match (’ .*, ]. \, ' 176')) { 

$device 一 class =* 1 '; 

} 

else if <device_match (* is 一 tablet •, ' ', •..')) { 

$device class = ' •; 


else if (device 一 match (’is_v/ireless_device 1 , ’====', * true') && 

device—match (• resolution 一 width 1 , ' , ••.> && 

(device 一 match(’mobile 一 browser’，'.', * Safari 1 ) || 

device_match ( ， . ，， * LIKE' , ， Android，})) 

{ 

$device class = • *; 


else if <device_match(•is 一 wireless 一 device *, •===■, *.*) && 

device 一 match (*.•, •<•, \ .J)) { 

$device_class = 'simpler 一 mobile*; 
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测试完毕 


parpen your pencil 
、‘ Solution 


$device class = NULL; 


好了，我们的测试已经完成！ 




芒 光也籩 的， iii - 

^■个 移劫到 笔8喝， 

fnLse '))( 


if (device 一 match < •is_wireless_device', 

$device_class = 'desktop'; 

} 

else if (device 一 match <• https_support •, = —, * *) | | 

device_match ( % coo^it 一 support •, ' = = , ’ faLse ') | | 

device_match( 1 ajax_manipulate_dom', •===•, 'false') 
device_match (' rcsotu.tLo^_wLc4th' , ' < ', ' 176')) { 
$device class = ' ； 


A 


磘係 ii 个设备•:*足残 
f ) 的馨本 t 求- 


f tme ')) 


else if (device_match(*is_tablet*, 

$device 一 class = ' tablet •; 

} 

else if (device_match( 1 is_wireless_device *, •===•, * true *) && 
device 一 match(•resolution_width•, *>=*, ' 3 ^ 0 ') && 

(device_match ( 1 mobile browser', ’ L-IK6 ', * Safari *) 
device 一 match (• ^obltc.&rowscr • r • LIKE ■, ， Android •))) 



{ 


$device_class = ' hl0htfr_ncobiU , ; 


else if (device—match(•is 一 wireless_device•, 
device 一 match ( VCSotw-tloiA. width ' t * < ’， 
$device_class - * simpler 一 mobile 1 ; 


或老它的洌 铱器扣 
分鰣摩俅大喝 7 

: • tmc f ) && 

>*)) { 


好了！ 3个任务我们已经宪成了两个！ tt 快大功告成了！ 

[7 f 编写一个 ( PHP ) 函数，测试各个设备类定义中我们关心的单个设 
备能力 B 

[7[将各个设备类的能力需求转换为代码中的条件 ( if / then ) 语句，从 
而能确定当前设备应该分配到哪个设备类。 

□ 编写一个简单的测试页面（类似于我们前面编写的 WURFL 资源 
管理页面），査看不同的用户代理会归类到哪个设备类。 
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最后冲剌 

现在来完成这个设备类测试项 H 的最后一步。我们想建立一个页 
面，其中包含一个简单的表单，输人一个用户代理后，它就能给 
出这个用户代理匹配的设备类。由于这与之前在 WURFL 资源管理 
页面上所做的工作极其类似，所以我们已经帮你完成了这个页面 
(太棒 了）。 

找们3&瑀写5这个萊辈的^ 

•：»H 式表輩.淦在认？呻中。 


这个含 s ；5： 议旮 fD ^5 - 
以及时左婀餘入的用 



index.php 




Device Class Testing 

T«t f»te umt agtnk mnng- 


0«vto»CtM«： Wdop 


在 device_classes.php 文件中加入代码。 

把 196 页上的测试代码增加到这个文件中，放在 
device _ match 函数后面，并保存， 

Q 在一个浏览器中査看 index.php 文件。 


Mozilla/5.0 (PlayBook; U; 

RIM Tablet OS 1.0.0; en- 
US) AppleWebKit/534.8 + (KHTML, 
like Gecko) Version/0.0.1 
Safari/534.8 + 


O 


默认地，页面会向你显示为当前浏览器分配的设备类。 


测试另外一些不同的用户代理。 

把这里的用户代理输入到表单域中，查看它们分别分 
配到哪个设备类。 


PantechP2020/JIUS05172010R; 
Mozilla/5.0 (Profile/MIDP-2.0 
Configuration/CLDC-1.1; Opera 
Mini/att/4.2.19039; U; en-US) 
Opera 9.50 



BlackBerry8330/4.5.0.77 Profile/ _ 
MIDP-2.0 Configuration/CLDC-1.1 
VendorID/105 

BlackBerry9300/5.0.0.794 

Profile/MIDP-2.1 Configuration/ 
CLDC-1.1 VendorID/245 

, 
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测试时间 


嗯，采看看 . 到底怎么样？ 


不错！ ^ 
0«vte«ID ： Vim_playbook - v©n , 
D^ic«CteM：tabier 


这个阳 m PLflybooteiEfi 
一个孕 扳宅尨 .. 


不锚! 


OevkM»: 

0«vlc«Cte 


_ 4 ■ ■- ii . 个笮枝孚41/政蛑 

pST'I ㈣ 它料 





<畤，沒穷怂泛个用户代迕并玄只何设备遣 


不错 I 

Om^cm\D: •blackbeny6330_vi 
Device Class: 'unsupportsd* 


_sub45077_106' 


T 


i± 个名 Lfloto'&errjj 的列 ％ S 大老 -、 

US 舨 本）. Mk / •不元卉在费面扣載 

: 理 


也杖 H 它鉍乏 s5i_f 
的其种沒度 6^jnvflScri^>t 
t^ r 


为什么 BlackBerry 9300 ( Curve ) 的用户代 
理没能匹配任何设备类呢？ 


看來出？点问涯 

问题是，这个 Curve 的分辨率是320像素（这说明它很宽，不能归入 simpler _ 
mobile 类），但是又没有 WebKit 浏览器（说明它不能算作是 higher _ mobile ) 。 
其他有较高分辨率但没有 WebKit 浏览器的设备都存在这个问题。 

我们需要修正这个问题，确保我们的设备类没有逻辑漏洞，以免设备落人。 

要修正这种有高分辨率但没有 WebKit 浏览器的情况，我们有3种 选择： 


0可以创建 一个新 的设备类来处理这种组合。 

^ ~ 、 # 分麟季分鉬 , 

0可以修改 higher_mobHe 设备类，允许有其他非 WebKit 浏览器 9 

0可以编辑 simpleLmobile 设备类，并删除分辨率最大为240像索的 
制. 


上述各种选择都是完全合法的。我们必须确定哪一种方案对 Acedh ! 学习辅导网 
站最为理想。 
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Joe ： 真的需要再增加一个设备类吗？看上去太麻烦了吧。 

Frank ： 我冏意。我们需要在细节差异和设备类数置之间达到某 
种平衡。感觉现在的设备类数量应该正合适。 

Joe ： 那么，现在该怎么办？ 

Frank : 嗯。问题在于有高分辨率但没有 WebKit 浏览器的设备 
被绕过去了，它们没有分配到任何设备类。 

Joe ： 这里实际上是不是有两个问题？ 一个问题是，正像你说 
的，我们没有考虑这些设备应该得到怎样的体验。另外还有一 
个问题，这就是我们没有留出一个可以作为退路的默认设备类。 
看起来设备检测很可能会出问题，或者可能还会出现我们没有 
想到的其他问题。我想我们需要某种类似于安全网的设备类。 

Frank ： 说得好。对干第一个问题，如果不再增加一个新的设备 
类，就需要填补这个缺口。问题 在于： 这里什么更重要，是设 
备分辨率还是浏览器能力？ 

Joe ： Acedlt ! 非常关注网站的交互性元素，这说明浏览器能力可 
能更重要。不过，与此同时，我们还打算向那些低分辨率设备 
发送较小的图像。 

Frank ： 我想你对 Acedlt ! 优先级的考虑是对的。如何折中呢？ 
我们可以更新设备类，使得 simplerjnobile 类没有分辨率上限。 

这说明一些较高分辨率的设备也会得到比较简单的界面，不过 
如果我没有记错，处理触摸式闪卡的开发小组在使用一个面向 
WebKi 浏览器的框架。嘿，实际上，我想这正是刚开始在 higher _ 
mobile 类中测试 WebKit 浏览器的原因。嗯，我得睡会儿了，脑 
子有点不够用了。 

Joe ： 等等，还有一个问题，图像呢？ 

Frank ： 我觉得如果为所有移动设备提供移动优化的图像（不大 
于320像素），应该很不错。这样我们就能使用响应式图像技术 
解决设备最后的问题。 




我们需要对设备类测试做以下修改 


mobile 


修改 device _ classes . php 文件，在测试表单中重试19 7 页上的 user - agent 串 
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用设备类真正傲些事情 




现在该用我们建立的设备类做些事情了。 

目标： 根据设备类向不同的用户发布不同的 S 录模拟页面。 

我们将使用前面的代码把设备划分为设备类，并向不同的设备 adapt-content 
发布当前 Acedlt ! 学习辅导模拟网站的不同版本，这里要使用我 
们在184页设计的框架。 


繪做 t 


| 将配置文件从上一个练习复制到 adapt _ 
content 文件夹。唉呀，又出问题了！不过我 
们保证，这是最后一次， 

这里处理的 HTML 和 CSS 相当基础， Acedlt ! 还处于这个新网站 
开发的的早期阶段，所以我们还在处理相当基本的模拟网站。 

对 unsupported 设杳的处理类似子桌®浏览 
器……至少是现在 

向 unsupported 设备类发布的内容与桌面内容基本上相同，不 
过我们会去除网站中交互式闪卡部分和在线商店的链接。另 
外 Flash 内容也不会发布到 unsupported 设备。 



1( "Relax 


aressfr ： 为 TBWfww 
间，我们已经帮你做了很多工作。 

后面几页会分析我们是如何做的，不 
过现在先告诉你在哪1可以找到这些 


已经完成的代码。 


議 

conflg.php 

h 議 

devlce.php 

議 

jvice_cl, 

圍 

index.php 

會 


係的 X 件. 


设备 w 始化 年 (0*5 

fo 

y ii ； &我们 的宄咸的议 
旮獒 .：♦) 试代砝 
妗你: 後备衿 5) ， 


device_classes. php 


testphp 


@个西承元埒伐輪入一个 
用户 代迓， 

同的 t ’4 备 f ■看 


_ 

styles ■ 


i 

common, css 

-i 

desktop.css 

-幽 

mobile.css 

-i 

mwebkitcss 
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内容发布 


^m^rpen your pencil 


作为起点， index . php 包含了各种版本的内容（对应所有设备类）。现在该明 
确会向各种不同设备类的用户发布（或不发布）哪一部分内容。对于以下的 
各个序号，在右边找到相应的标记，并填入适当的设备类。 


❶对 


设备类使用这个 DOCTYPE 。 


❹# . 

. 设备类使用这个样式表。 


和 


o ^ . 

设备类使用这个样式表。 


和 


o 对 


设备类使用这个样式表。 


O ^ . , . ^0 

. 设备类显示这个版本的导航。 


o 对 


设备类不要显示这两个链接。 
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下面是 index . php 文件的标记。用它回答左页上的问题。 


<! DOCTYPE html PUBLIC "-"W3C//DTD XHTML Basic 1.1//EN" 

"http://www.w3.org/TR/xhtml-basic/xhtml-basicll.dtd M > 

<!DOCTYPE html> 

<html> 

<head> 

<title>AcedIt! Study Aids</title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8 n /> 
<meta name="viewport n content= n width=device-width, initial-scale=l , 
maximum-scale=l , ' /> 

<link rel="stylesheet" type="text/css 1 ' href="../assets/common.css" /> 

<link reld’stylesheet" type= n text/css" href="••/assets/desktop.css" /> 
<link rel e * w stylesheet t, type»"text/css M href* n .. /assets/mobile. css M /> 
❹ clink rel* n stylesheet n type='*text/css" href= n ../assets/mwebkit.css" /> 

</head> 

<body> 


» 

index.php 


<div id= ,, header ,, > :主金 .Nowlp 分其总 

<hl>AcedIt! Study Aids</hl> it £ -fj 

</div> 

<div id= n navigation n > 

O <ul> 

<li><a href="#">Home</a></li> 

<lixa href*"#”>Shop Online</a></li>^^ 

<li><a href="#">Study Now!</a></li>^^^ 

<li><a href="#">Contact Us</a></li> 

<li><a href= w # w >FAQ</ax/li> 

</ul> 

</div> 
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还有问题 


_ t^^rpen your pencil 


噢.你以为做完了？还没有呢，不过至少你已经完成一半了! 


© 向 . 设备类发布 Flash 内容。 


G ^ .. 

. 或 . 设备类不要使用 Flash , 

O ^ ... sSi . 

设备类不要显示这些部分。 


® 向 


和 


设备类显示这个版本的 导航。 


® 向 


设备类睹藏交互式闪卡的链接。 




+ 命 
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<div id =,, intro"> 


index.php 


<p>Morbi non erat non ipsum pharetra tempus. Donee orci. Proin in ante. 
Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet 
urna sit amet risus...</p> 

</div> 

<div id=" feature/^\ 


<div id=" featured 一 product’’> 

Q <p>Featured product Flash slideshow.</p> 
<p>Static featured product image.</p> 

</div> 


</div> 

<div ic^’ads "〉 

• • • ^ - 

</div> 

^^<div id= M fromtheb 1 og ,f > 

… _ _ 

</div> 

<div id a=,, navigation ,, > 


耙 钕了一签之本泠容 


ii ? 钱垠沪 S . 不过这螯只袅 
占仿符.孖 feFia 认視喊扣輯 


〉 <li><a href= n #">Home</a></li> 

<li><a href»"#">Shop Online</a></li> 

<li><a href="#">Study Now!</a></li> 

<lixa href= w # M >Blog</ax/li> 

<li><a href-"#">Contact Us</a></li> 

<lixa href="#">FAQ</a></li> 

</ul> 

</div> 

<div id="footer"> 

<p>Current device class: <?php print $device_class; ?></p> 
</div> 


</body> 

</html> 
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代码转换 



parpen your pencil 
Solution 


下面来看不同设备类的标记有什么差别，并转换为具体的代码。 


对 sL ^ vt * pUr_^vtoblLc 


设备类使用这个 DOCTYPE t 


<?php if ($device 一 class == ' 8impler_inobile') : ?> 

!DOCTYPE html 一 PUBLIC H -//W3C//DTD XHTML Basic 1.1//EN" "http:// 
www.w3.org/TR/xhtml-basic/xhtml-basicll.dtd"> 

<?php else : ?> 

<!DOCTYPE html> 

<?php endif; ?> 


^obiUiZ ^ ^ <i 
用 XHTML 
與姑 t ’4 旮类 部 f £ 用 
htmls. 


❹对 . 

M.^VSW.ppOKtCd 


tablet 


设备类使用这个样式表。 


6 ,77 effl . 我们时 — 

^ iy \^ lcr_^obLlt 和 V \ lQV \ tr_vMbilt 设备类使用这个样式表。 


• 备个 a 务类邾秕琿利⑶ 

htghcr _ kvu>btU 设备类使用这个样式表。这个丈件名哏坫切。 


clink rel=*'stylesheet" type="text/css" href= M ../assets/common.css" /> 

<?php if ($davic«_clas3 = 'dasktop' 

|| $davice_clas8 = 'tablet 1 

|| $devic •一 class = 'unsupported') : ?> 

clink rel= f, stylesheet" type="text/css" href*"../assets/desktop.css' 1 /> 
<?php endif; ?> ii 普样 式中的栉劫设 备发耷 

j-^Tphp if ($device_clas8 == 'higher^jnobile' 一普與同的； t# 

O || $device 一 class = • siiqpler 一 mobile : ?> 

<link rel= M stylesheet" type=’’text/css" href= M ../assets/mobile.css'* /> 

<?php endlf; ?> 

j^<?php if ($device 一 class = ， higher 一 mobil.,}: ?> 

<link rel="stylesheet" type="text/css" href="../assets/mwebkit.css" /> 

<?php endlf; ?> /V 


这个禅式 彖旬棬 4 扣 S 沾;»*的内容.^ ^ WrtKdtvi'j 
圮器坺 m . 
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❺对 


❻对 


设备类显示这个版本的导航。东承轉式的舁軚.靠冱资葙蕞 1 ••方 
.. 设备类不要显示这两个链接。 


<?php if ($d«vice 一 class = ’desktop’ 

|| $device 一 class = ' tablet' 

|| $device 一 class = 'unsupported') : ?> 

<div id=’’navigation"> 

<ul> 

<li><a href="# w >Home</a></li> 

<?php if <$devic«—class !» 'unsupported') 

<li><a href =, '#">Shop Online</a></li> 
<li><a href="#">Study Now!</a></li> 

<?php endif; ?> 

<li><a href=’’#">Contact Us</a></li> 
<lixa href= M # H >FAQ</a></li> 

</ul> 

</div> 

<?php endif; ?> 


钧物残熹吋染的 闪卡！ 


o 向 


. 设备类发布 Flash 内容。 


n^h 產常不祜 垠的地 用今牦动设 
条。平飯宅链也存奋阉碑的闷姓 


❻对 tablet V\i^V\tr_vMbiU 

或 w .^ w ： pj»prtcd . 设备类不要使用 Flash 。 
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谁得到什么？ 


c^barpen your pencil 
Solution 


« o 不在穋功 《 晏土 s 承 产苦多 外也不含今棉 u 5 ® 丄 •鈦 E < 考的 
俅 lit 齐！祛供一个存僉佴之的链戏 


O 对 |itghcr_>^btU 

设备类不要显示这些部分。 


? 


slkvtpLer_KVLobLU 


<?php if ($device 一 class = 

'desktop' 

|| $device 一 class = 

0<div id="ads"> - 

'tablet') : ?> 

</div> 

<div id=" fromtheb 1 og*' > 


</div> 

<?php endif; ?> 



iii 專紂的稃刼舨參 . 
赶在资安备下 if ,, 

,c2 


( R ) 向 刍！^ r .^^ 0 . 10 . 1 ； 1 ： 6 ........................ 和 1 

.. & }^ l ^ r .^' 0 . LLc . . 设备类显示这个版本的导航 • + 

0 向 .. 设备类隐藏交互式闪卡的链接， 


<?php if ($devic • 一 class = •higher 一 mobile 1 

|| $device_class = ' 3impler_mobile') : ?> 

<div id=’’navigation"> 

<ul> 

<li><a href= f, # ,, >Home</a></li> 

<li><a href="#">Shop Online</a></li> 

<?php if ($device__cla8s = •higher 一 mobile ’）： ?> 

<li><a href=’’#’’>Study Now! </a></li> 

<?php endif; ?> 、 ^^^er ^oblu ^ ^ 

<lixa href="#">Blog</a></li> 电两卡的钐韙 

<li><a href= n #">Contact Us</ax/li> 

<lixa href= n # n >FAQ</ax/li> 

</ul> 

</div> 

<?php endif; ?> 
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试试看!在 index _ solution . php 中找到 index . php 的完成版本。把当前的 index , 
php 文件替换为 index _ solution.phpa 


在你的 web 浏览器中导航到 test . php ,尝试 useful _ user _ agents . txt 文件中的一 
些 user - agent 串，査看不同的设备类版本。可以直接用你的桌面浏览器査看 
这个模拟网站的桌面版本。 



我们改进了200页上的设备类测试，不过你还能想到可 
能还有哪些没有考虑到的问题？ 
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WURFL 通用性 


一定要小心谨饿，傲好准备 

再来看第3章，我们强调了使用用户代理的服务器端设备检测 
存在的一些问题。有几个风险一定要 记住： 


0浏览器不一定发送正确的用户代理。 

有时用户会有意覆盖用户代理发送的内容，有时浏览器自己就会 
发出奇怪的内容。这可能导致设备数据库返回不正确的 数据。 

0 WURFL 并不总能找到一个 (特 定的)匹配。 

WURFL 并不总能找到一个成功的匹配，或者可能根本找不到任 
何合法的匹配。你有可能只得到一个通用的设备 ID ， 或者什么 


w 再来看 这一章 之前创建的资源管理页面，输入以下用户代 

理： facebookexternalhit /1.1 (+ httpy / www . facebook . com/externalhit 
uatext . php ). 


太通用 3 

如果在我们的资源管理页面尝试这个 facebookextemalhit 用户代理(如 
果还没有，现在就试试吧)，你会注意到 WURFL 把它的设备 ID 识别 
为 generic 。 通过这种方式，实际上 WURFL 是在耸肩摇头说“嘿，我 
试过了，不过我确实不知道这家伙到底是什 么。” 


也得 不到。 

+ 动手做 I 

WURFL 的"遍用” 


邡淡怎么办？ 


通用设备的能力值意义不大，不足以作为判断的依据 。例 
如， facebookexternalhit 客户的 resolution _ width 不太可能正好是90像 
素。这只是 WURFL 数据文件中对应通用设备的值而已。 
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我们 t 要一个更大的安全 R 

设计一个使用服务器端检测的网站时，要花点时间考虑如果返回 
一个通用 ID ， 网站会有什么表现，或者如果设备根本没能匹配该 
怎么办。 提示： 它应该还能正常工作。 

俱尔的成功还不萁成功 

目前，在 Acedlt ! 学习辅导移动测试网站上，如果用户代理 
匹配到一个通用设备，会接收 unsupported 设备类（可以用 
facebookexternalhit 用户代理试试看)。指定为这样一个设备类应 
该说也算合适，不过这种分配有点靠运气。 




Watch it 


WURFL 数据可能有所不同。 

下面将我们的资源管理页面中的 
facebookextemalhit 能力与 ScientiaMobile 资源管 
理器中的数据做个比较。 


访问 http :// www . tera - wurfl . com / explore ，并输人 
facebookexternalhit 用户代理。首先可以注意到 ， Database 
Edition 中将通用设备 ID 命名为 generic _ web _ browser . 


如果仔细研究返回的能力，你会发现更多差别。例如，请看 
显示 ( display ) 能力组，将它与以上“通用”设备 ID 的 display 
能力组值进行比较。 


否 ® 的 t •蓴 S 杀. *5 
■faceboofctxter 八 fllW 用卢 



差别很大，是不是？熟悉这种 WURFL(PHP API , 基于文件 
的版本)是很明智的，另外建*我们自 d 的资源管理页面确 
实是个好主意。 
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如果根本没有设备呢？ 


及时的一针 


php api 提供 r 很多方法来确定匹 gd 的特定程度。下面来看一 
看。 


设备沿 . 





& 运的罐 （沒用 H 4 备 




有两个 * 因： 错误检査的好处和桌面浏览器补丁。 

检査是+是缺少设备 ID , 这就有点类似十家务活干得 
好。我们要保持整洁。 


通过使用桌面浏览器补丁，并结合 WURFL , 我们可以 
得到桌面浏览器以及移动浏览器的基本信息。 

不过，对于所有与桌面浏览器的匹配， isSpecificO 都会 
返回 FALSE , 因为一般不认为补丁中的数据是特定的。 
通过检査退路，并确保它不是根（通用），可以避免 
错误地把桌面浏览器匹配识别为失败。 
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1^11你前面谈到的桌面浏览器补丁是 什么？ l 15 ) ^ 设备类测试代码作为一个函数/对象/或者采用 

其他形式不是更好吗？ 

¥: wurfl 的默认安装提供了一个补丁，它能识 

别（范围很广的）一组桌面浏览器和移动洌 t 器。 确实. 亨 实上，对于真正的項日，代码可能会 

v 史精巧，史高雅，更有条理，而且史强大.在这里 

|€) ••我 不 太明白 WURFL 的哪些部分是 API 。 我们只是向你展示基站的知识， 


¥ : WURFL 本身只是数据„ API 是与这痊数据交 
互、组织数据等等所需的全部代码.对应多种主要 
的編杻语言分别有多个这样的 API 。 

|6) : facebookexternalhit 用户代理是什么意思？ 


问：抱歉， 不过如果我没有想错， $ device 变置是 
一个全局变置。这太糟糕了。 


看看上面的 介紹， 


有人在 Facebook 上分享一个裢接之类的东东 
时， Facebook 通常会从那个页面去获取一痊内容， 
而且/或者会给出一个代表性的坫略图 n 这时它用的 
用户代理就是 facebookextemalhit 。 
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适应内容调整的丝带 


^cetu ： iS( 
SoLytU 


现在我们已经攻克了所有难关！大功告成！ 


$ device 一 class = NULL; 

if (!$d«vic •- >id || 

(!$davice->isSpecific(> £& $device->£allBack 
$device_clas3 * 'unsupported'; 


•root')) 


else if (device_match( 1 is_wireless_device ', •===•, * false 1 )) 
$device class = * desktop'; 





urnure ur 

scekri^ 
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如何在*务器绡 检測和 响应式 Web 设 i + 乌特性 
检谢之 闲傲出 迭抟？ 前者 玎能在 遇 到 不含适的成捉 
摸不玢的用户代瑁时夹蚊，而后者未能在所布移劫 
洌览8 上得 到全* 支辩。 


这并不是非此即彼的问腰。使用服务器媸设备 
检测时完全不必把 RWD 抛之窗外。 

利用这二者的组合可以完成一些非常漂亮的啦 
情。这两种检测方法各有利弊。让二者协调合 
作，这是我们在第9章要讨论的内容的一部分， 
后面将会看到。 


BULLET POIHTS 

I ■ 利用设备数据存储库（如 WURFL , 代表无线通用资 
源文件 ， Wireless Universal Resource FiLe ) ，我们 
可以得到大置设备的非常详细的信息。 

■ WURFL 数据包含大董信息.每个设备超过 50() 个能 
力，这些设备组织为二十多个组。 

■ 可以使用一个设备数据库找出 一个给 定能力的值， 
并根据这个值采取相应的行动。 

■ 与 WURFL 数据交互的 API 有很多 ， WURFL PHPAPI 
是其中之一。不同的 API 处理和表示数据的方式可 
能稍有不同。 

■ SciemiaMobile 是201丨年由原先的一些 WURFL 维护 
者创立。这家公司提供了 WURFL 的开源和商业许可 
证。如果 WURFL 不适用，还有其他一些选择。 

| ■ 处理较大的项目时，将相关的能力分组为设备类会 

很有帮助。 


■ 设备类是根据共同能力建立的抽象的设备分组。 

■ 通过将-个设备分组到一个设备类，我们可以对它 
采取进一步的处理（例如，发布适应性的内容> , 
而不必一直跟踪单个的能力， 

■ 如果代码中要使用一个设备数据库识别设备，建立 
默认设备类.错误检查和通用设备处理会很重要。 

■ 与 Web 上的所有一切类似，服务器端设备检测不是 
—个100%可靠的概念。 

■ 服务器端检测和内容适应性调整可以与客户端适应 
性调整相结合，这二者不是互斥的。后面将介绍更 
多有关内容。 
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+ 在格布爱好 I 


“我们想要个应用！”最近一到两年，我们常常听到这样的呼吁，这通常 
意味着要为你想要支持的每•个平台完成原生代码开发和部署。不过，原生 
应用不再独占江山。如今，面向移动浏览器的 Web 应用已经蜂拥而至，特别 
是现在 HTML5 和他的死党 CSS3 和 JavaScript 都在摩拳擦掌、跃跃欲试。下面 
就让我们利用一个移动框架更深入地探寻这个移动 Web 应用世界，移动框架 
就是专门设计用来帮助你快速完成工作的代码工具！ 
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破译行话 



正像几年前的 Web 2_0—样， HTML 5 
和应用己经成为媒体和互联网领域人们 
最爱说的行话。 

对于不同的人，这些词有不同的含义， 
如果开一个派对让大家对这些词的理解 
自由发言，各种不同观点可能很令人兴 
奋，但分歧太多也可能会让人困惑。 


作为一个 Web 开发人员，你要面对用户 
提出的需求，可能已经有一些性急的顿 
客在坚持不懈地要求你为他们专 f 1建立 
HTML 5 和 Web 应用。 

那么，他们到底想要什么？ 
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HTML 5 ……应用……迖些询究兗是 f 十么意思、? 


HTML5 很硝碥 


HTML 5 很明确。这是一 个正在 发展的标准，是我们/■解和喜爱的 HTML 的 
一个演进版本（如果没有这种语言，根本不会有现在的 Web ) 。 HTML 巳经 
有20多年的发展历史， HTML 5 在这个标记语言*础上做了进一步调整和改 
进，特別是增加了对 Web 应用的 i 持，而不会对向后兼容性有太多影响。 


HTML 5 引人了一些新的语义元素， $ B < section > % < article >、< nav >^ 
< header >。 它简化了一些标记的语法，利用 < audio > ft < video > 标记为我们提 
供了强大的媒体能力，另外通过一•些新的 JavaScript API (如地理定位和离 
线存储）大大解除 f 对交互性的束缚。 


HTML 


不过还有烫多 


人们谈到 HTML 5 时，通常是指 HTML 5 本身、超炫的 javaScript 、 还有漂亮 
的 CSS 3 这三者的组合。简单地说，这些正是构建现代交互式 Web 应用的核 
心部分。 


㈣ 娜以二我一 


读. at 故容务让人 


……邡么，到成什么是 Web 皮用? 

HTML 5 Web 应用中的 “ Web 应用”部分到底是 
什么？ HTML 5 本身已经很令人困惑了，再结 
合“应用”这个词，情况会更梢糕，你将进入 
一个更昏暗的充满危险和分歧的世界。 

你吋能经常在浏览器中査看网站，根据你看到 
的网站表现来体会这是否像是一个应用。要强 
调任务的完成，布局要占满全屏，另外动作不 
会导致整个页面重新加载，还有交互性，所有 
这些都可以作为准则来判断这是一个应用而不 
只是以内容为中心的常规网站。 

简单地说，任何人都无法对“应用”这个词给 
出一个让所有人都满意的完美定义。 


方 过它伯物兵有— 
些 矣互性特点， 朴 
第筮令矣捭 H 丁; VH 5 
及扣兴轶沭的強大 
联力。 
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膨胀的页面加载 

“传统" R 站的一般表现 

在传统的网站模型中，一个 HTMLUr 向请求会获取这个 K 面的所 
有组件，包括 HTML 本身、 JavaScript、CSS、 图 像等。 


浏览器通常很揎 K: 缓存元素，另外 "T 以把 Web 服务器配置为鼓劻 
吏多 缓存。不过这个模型意味着每次交互（包括提交表单、点击 
链接等等）都会导致加栽完整的豇向。 


第一次页面请求 





栽浏览器之前已经 f 钱过的资源，而且会因为 m 新牛. 
成内容和策新处理町能没有任何改变的代码而影响浏 
览器的正常工作。另外交互性也不太好。 



服务器 


的 tett 部谇涑 


后 绫请求 



邊过坫交表輦 • 魚壬⑽ 

后鰱请、 我还霑要—点倍肩。 

客户 j 


客户谖 a —喳 ft S ( /^ 
不过 不技含 辟）- 


服务器 


加載蝥个两面 让 人 
感 f 之 * 作7孖. 
不大(象个&用 


爯 ; 欠加載瞀个否面. 軚衿 
來沒苟 & 涑过一轉。 
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应用型 R 站的一般表规 


在应用型模型中，客户会扮演更重要的角色，每个请求中传递的资源会 
更少。可重用的标记、代码和资源可以在本地存储。另外使用 Ajax 异步 
请求 d 修改的内容或数据。这些后台异步请求会“拉入”特定的内容或 


资源，而不会导致重新加载整个 ur 面。 


只请求有关的部分内容而不是重新加 载整个 页面，这样可以减少带宽和 


很多 之部！沒过 


处理负担，改善交互性。 


第一次页面请求 


后缕请求 



. •谨常 2 有 一# 轉碟 



的華充扣钍疼器卉铯 
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花格布 Web 应用 


Tartans Wwlimited 的移 e^HTMl5 Web 应用 


Tartans Unlimited 是一家国际机构，正努力传承苏格兰花格布 
的相关历史和文化传统， U : 它在世界其他地方得以发扬光人。 







%，” 




这 t 杓容还域 f 




I 最冱 发支的事钟吗 9 

一可褓萼笱列柯^ 

丨事仲内落，是条昃$ -簋奢 
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JNI: 嘿，朋友们，我知道需求还很含糊。和 Ewan 交谈时，我有种感觉， 
他希望这个网站（噢，按他的说法，也 "r 以说是应用）主要完成两件 
事。现在有一大堆内容饭面，不仅有关干这个组织的信息，还有关于 
花格布的内容。另外 还有整 个这个板块，他把它叫作 Tartanator (花格 
布爱好 者）。 

Joe： Tarianator? 不是开玩笑吧？哈。 

Jill： 是的，千真万确，实际上他希望整个网站就叫这个名字，而不只 
是一个版块。毕竟，看来这是一个组合，不仅要提供一 种吋浏 览的方 
式列出花格布图案供用户研究，另外他还希望能 够让用 户利用一个表 
单创建自己的花格布图案。 

Frank: 哇，听上去很震撼，让人很艮惧，不过作为一个挑战，实现起 
来可能会很有意思。 

Joe： OK ,内容 页面， Tartanator 板块，这些我知道了 . 那么，关 

于“事件”贞面的这个说明又是什么意思？ 

Jill： 別着急！我就要谈到这个问题了！我们已经决定通过两个阶段完 
成这个项目。第一阶段中，我们会建立内容页面的基本结构，并实现 
花格布列表。他还希望我们考虑为用户提供一个界面来创建他们自己 
的花格布，他想知道这个界面是什么样的，可能还希望我们提供这个 
界面的一个原型。 


Joe： ng, 好吧，我们会建立创建花格布的表黾，不过目前它不需要做 
具体工作， 是吗？ 



TartayyMtDY ^ ^ 
藏的一昝左格4 


A 格4 


cLa^il 




JHI: 对，差不多吧。在第2阶段，我们会让它真正开始工作，那时还会 
回来处理这个“事件”板块。 


Frank! OK ' 看来现在可以开始构建-个移动嫩应用^卵邮终布 
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Tartanator 项目计划 


Tartanator 第 1 阶段主 i 十划 

□ 碰容页面和网站结构。 ^- ㈣ 犧札 

需要创建基本版块和页面，并创建一个整体结构。 


□ 创建花格布列表。 

对干第•阶段，我们将创建•个包含现有流行花格布图 
案的列表。花格布版块应当是一个浏览界面，当然，感 
觉要像个应用，而且要面向移动设备。 

□ 构建花格布创作表单的一个原型。 

最后， Ewan 希望用户能够使用一个类似应用的移动界 
面创作他们自己的花格布。他想看看这个界面是什么样 
子，所以我们要为他设计一个原型。 



«，你可以从头开始构建一个应用 

如果你想掌振 CSS 、 HTML 和 JavaScript , f 解如何 
让它们合作创建-流的 Web 应用，可以看看这本书 
《Head First HTML 5 Programming (中文版）》。 
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……或者你玎认使用一个移动 Web 框架 

要构建 Tartanator 网站的第 阶 段，可以使用-个移动 Web 框架，迅速提高我 
们的 Web 水平。 

仍然要使用 HTML 和 CSS ， 不过面向移动的用户界面框架可以帮助我们史快 
地完成工作。 

为什么使用移动 Web 应用框架？ 

面对现实吧。要想从头开始构建复杂的交互式 Web 应用，这可能是一个让 
人望而生畏的 r 作。 Web 开发框架是一组打包的交互式元索和代码工具， 
可以为我们助背之力。 

0框架可以帮我们让网站或应用 jt 上去是 移动友好的。 

面向移动 （ Mobile - oriented ) 的框架一般能帮助改变和设 
置 HTML 元素的样式，使它感觉更面向移动，这通常可以节 
省我们大置 时间。 

o 框架可以帮我们让网站或应用感觉是面向移动的^ 

可以由框架来完成过渡和效果之类的繁杂工作，让网站或 
应用感觉更自然（或者至少更一致> # 

0框架可以帮我们管理跨平台不一致性。 

框架开发人员能充分驾驭那些讨厌.奇怪的浏览器特异问 
题，否则它们可能会带来很大麻烦，框架开发人员会在框 
架的代码基中解决这些问题，使我们免遭此劫。 


根辗兵仿的項 
望―炉鞒重新孖 

互式 Web 应用所 

在迗种幘巩 r, 
移动犴矣柜棼靱 
有3伊武乏地。 



Watch it 


要小心选择和使用 Web 框架。 

框架是非常强大的东西，不过它们也有一些弊端。很多 
框架非常庞大，可能会 lh 你的网站增加数百 KB ， 使网站 
膨胀。有些人会采用一种厨房水池的方法，在网站中加 


人大 t 部件和花哨的动画，这样不仅会让网站的字节数大幅增加，在 
能力较弱的设备上还可能导致严重的性能问题。最后一点，一定要对 
框架的设备支持情况进行评估。有些框架只支持一个或几个主要的前 
沿平台 a 
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jQuery Mobile 


fartanator 的 选择 ： jQuery Mobile 

要构建这个 Tartanator 网站，我们将使用 jQuery Mobile 框架。 


jQuery Mobile 是一个专门为移动设备优化设 计的用 户界面框架。它建立 
在相当流行的 jQuery JavaScript 库基础上《 

我们选择 jQuery Mobile 完成这个项目的原因是，这个框架很容易使用, 
而 且它的 体系结构可以很好地映射到我们的 HTML 5 中心， jQuery Mobile 
采用一种巧抄的方式设计，可以轻松地（有时甚至是不可见地）关联到 
良构的 HTML 5 标 iti 。 

另外，如果你以前用过 jQuery , 就会知道它是多么直观和简单。 


^ jQuery 

^ mobile framework. 



耷 M 0 — 

才早. Mobi . U<fe 

%.^ ： m 




你说的没错。这里情况磽实很复杂。 

正是因为这一点，我们才把移动 Web 
世界比作原先蛮荒的西部世界。不过， 
这确实不是危言耸听。这里没有简黾 
的答案，在移动 Web 领域，提出复杂 
的解决方案通常需要结合多种实现方 
法 0 


所以，你不能（也千万 不要） 丢掉我 
们已经掌握的 知识。 到目前为 lh 我们 
介绍的所有技术都不是互斥的，在不 
同环境下，每一种技术都或多或少有 
某种程度的价值。 

主沒深 4 杂 ，移 ^ web<t 4 如此! 
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tliereiare n° a 

Dumb Questions 


r ») r 还有没有其他移动框架？ 

然了！条天都有更多《动枢架问世。其他移动 web 
枢架包括 Sencha Touch . Wink 、 iUI , DHTMLX Touch 和 
JQTouch . 

I 移动 Web 框架到底由什么组成？ 

^ I 这取决于具体的枢架、不过大多数都是 
JavaScript , CSS 和图诹（或 其他） 資源的组合，用来帮助 
设置 样式. 丰富移动体验 • 有痊框架还包括一个服务器端 
组忤，可以帮助生成（而不是 调整） 内容 • 

1^1:等一下， zepto . js 或 XUI 呢？ 

iZepto.js (非常轻 f 级的 JavaScript , 使用 jQuery 语 
法）和 XUI (也是非常精 ft 的 JS > 与其说是怄架，不如说 
是库。框架通常有 in 组件，而库往往只是代码（在这里就 
是 JavaScript 代码）。这是一个灰色地带； 4■与柜架的划分 
不容易定义 - 

|^):这么说 ， jQuery Mobile 就是原先 jQuery 库的一个移 
动版本吗？ 

¥ :别那么快下结论，真性急！ jQuery Mobile 建立在 
jQuery 基础之上，但没有取代它.你会注意到，我们用 
jQuery Mobile 构建网站时，包含的第一个 JavaScript 文件就 
是核心 jQuery 库。 

问:所以， jQuery Mobile 是一个扩展 jQuery 的 JavaScript 
开发框架。 

答：对 心一 点. 没错 ， jQuery Mobile 枢架里碎实有 
JavaScript . 不过 ， jQuery Mobile 并不是一个 JavaScript 框•架 • 
它比这范围 更大。 这是一个用户界面枢架.这说明、它还 
包括样式表、图标和其他一些东西 • 

1$) , # 我们真的需要使用框架吗？ 

需要吗？理论上需要吗？不，根本不需要！实际上， 


建议你完全可以从头构建一个应用型的移动网站（如果你 
办得到> a 

不过，枢架（元其是 jQuery Mobile ) 有一点好处，它们能 
为我们解决很多烦人的特定于平台的奇怪问題和 bug 。 框架 
开发小组对不同移动浏見器的各种怪问题很有研究。 

我们的时间和篇幅都有哏。如果没有莱个怄架的帮助，要 
想实现这个 Tartanator 网站所需的功能，可能相刍蛛手，更 
不用说可能还需要大量额外的測试 （因 为我们没有经过充 
分測试的跨平台支持作为基础）. 

我还是不明白。为什么这个 Tartanator 是一个应用而 
不是网站？ 

¥:因为 Ewan 这么说.不，开玩笑的.应用和网站之间 
的细微差别很糢糊，所以答案有时几乎是随意的。 

对 Ewan 来说，这个 Tartanator 网站就是一个功能丰富的 Web 
应用。他的关注点在于用户能够查找和创建花格布，另外， 
最后还可以搜索相关的事件，在他看来，这些•可以说明它 
就是一个应用。 

但是如果它是网站呢？我就不能使用 jQuery Mobile 
了，是吗？ 

I jQuery Mobile 是一个用户界面枢■架。它并不关心你 
要构建的东西叫作应用还是叫作网站。它的任务就是使用 
CSS 、 JavaScript 和 HTML 5 组合，让你构建的应用（网 站） 
可用，在不同的移动平台上不会出问題。 

那么，哪些移动浏览器支持 HTML 5? 

¥ 2没有哪一个洌見器支持（全部） HTML 5. 别担 
心！ HTML 5 是馍块化的，移动洌見器已经开始支持越来 
越多的 HTML 5 糢块实际上，任何现代桌面浏見器都没有 
全面地支持 CSS 2.1 的每一个部分，类似地（正如规范中所 
指出 的）， HTML 5 未得到所有浏見器的全面支持也是可以 
理解的„ _，这个规范还在发展。网站 http :// www . caniuse . 
com 是一个很好的参考，如果你要查找 HTML 5 和其他主要 
Web 技术中某些特性支持情况的有关信息，可以访问这个 
网站 • 
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Tartanator 之旅的第一站 是学习 如何用 jQuery Mobile 建立一个简单 
的沉面，这样我们就町以开始逮立这个项目中的页面。你会惊奇 
地发现这是多么的容易。 

从最綦本的孖飽 

先从一个超级简单的 HTML 页面开始，这样你可以更清楚地 r 解 
具体使用 jQuery Mobile 的一鵠基础知识 * '么 赶 叔州 

在过办两我含 1 HTML 5 戊负的.秕籩 

圯到迗哒甭否 < V > OOiyPB >^ ii A 


<title>The Tartanator</title> 

<mata name="viewport" content3 n widthad«vic«-width # inltiail-scal ， 
<link r«l= M stylesheet" hr«f= M httqp : //cod*. jqu*ry. coo/mobile/1. Ore ： 
jquery .mobile-1 .Orel .min. css* 1 /> 

<script 8rc*"htt^>: //cod*, jquery.com/jquery-1.6.4 .min. j«"X/acript> 
< script »rc="http: //code, j query. com/mobile/X. Orcl/jquery. mobile-1.( 
min. js"X/script> f 

</ head > 1; 


• - ^ 

如華 (4 <5 
(枯 <0 
MobllcO 么 
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页面其余的标论 

我们已经从 jQuery 的 CDN (内容分发网络，即在 code . jquery . com 托管的代码） 

包含了3个主要 jQiiery Mobile 组件。这是一个可以快速链接代码的可靠的位 
置。 

我们已经包含了3个核心文件一主题 CSS 、 jQuery 内核和 jQuery Mobile 本身， 

现在需要对 < body > 中的 HTML 标记做一些调整。 

我们把各部分内容包围在<(1^>标记中，并为这 g < div > 标记指定描述性的 # 

data -* 属性，通过这种方式告诉 jQuery Mobile 我们希望如何处理这些 内容: \ 

\ data- . 


data rolti^ - 

i 4 4 苦 t>rjc2uery 
Mobile 个内容 
钍 n 綷一个宄 t I 

雨面 <• 


data roLt 

: ci 差毋 ® 的 i # 
内容 . 


r 二一二 


<body> rfota-roLc ih 、《 »rfer ’ •則鲁 


它如问让炫 


<div data-role«"page"> 

<div data-role="he&der"> 

<hl>The Tartanator</hl> 

</divX!-- /header --> 


厂诉 j 


Ciutrij 


MobUdi ® 蝥这个 


J 内容的轉式.璉它威妁一个 
^ 杉 . 抵 : t # . 


»<div data-role 


•content"> 


<p>The Tartanator is a community-built 
association of groups, businesses and individuals 
bent on keeping the Scottish heritage alive 
overseas by promoting the understanding and 
enjoyment of <strong>tartans</strong>.</p> 
</divX! — /content --> 

<div data-rol«»"footer"> 

<h4>Bring forrit the tartan!</h4> 

</divX! — /footer --> 

</divX! --/page--> 

</body> 


ex.html 




m 




建立一个简单的 jQuery Mobile 页面确实这么容易。 

在 index.html 文件中增加首部和主体元素，并保存。在浏览器中査看（如果愿意， 
你也可 以在一 个移动浏览器中查看> s 
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是不是 lOS ? 


我们动身吒 f 


目前还没有太人意思（嗯，确实很乏味）， 
不过这个登陆 m 面看起来确实有点“移动” 
味儿了。 

注息 jQuery Mobile 如何增加梯度、大小和字 
体处理，以及如何把我们的元素转变成类似 
页眉和 饥脚。 


戏 (0 的鏢一个 Mobi4.€ ^ 
乇 ( 'ip^ovut S . 





• s ……雨脚 立件 不太舍 

(i . 不 过稍场爲考 A 

这个用 ft 


猷认的 jQuery Mobilell 起来绝对是 iOS 范儿。 

毕 t, 脚角按钮、梯度颜色绘制的标题这些原生 
iOS 甲台的外观 d 经成为移动 Web 应用的常见标 
志性象征。很多人现 fr: 都会把这种外观与“移动” 
关联起来。 

不过除 fApple 式的美化，这里还有一些冇用的东 
两。为便千小屏幕阅读，这里增加 f 空白符，另 
外优化 r 字体大小。稍 /n •我们还会构建表单，到时 
会看到 jQM 为我们提供 f 史人的输入区和史人的按 
钮（省得我们的胖指失按错键）。 


‘个制孑! 
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HTML5 data-_ 厲性 


jQuery Mobile 大量使用了 HTML5 新引入的 data-* 厲 
性。在这个简单的页囱'中，我们使用了 data-role 厲 
性吿诉 jQuery Mobile 给定元素在这个页面结构中 
的角色。对现在来讲，情况很 简单： 我们有一个 
页眉， 一些 内容，还有一个页脚。 

为 Tartaiiator 构建更多贞 ® 

我们巳经有了一个坚实的基础，下面为 Tartanator 
构建更多页面。现在已经有 f 登录!»面，不过还 
需要 ii： 它链接到另外 •些 基本页面，继续推进我 
们的项目。 


. HTML 5 data -* 特写 

data - •属性是 HTML 5 引入的，利用这些厲性，幵发 
人员可以为 HTML 元素关联很有意义的轻置级数据。 

过去，为了达到类似这样的目的，幵发人员也尝试 
过一些方法.比如通过“劫持”另外一些元索属性 
(如 class 或 title ) 来 实现。 

不过，现在已经有了真正的.更有实效的方 
法 ， jQuery Mobile 充分利用了这 一点。 

在我们的前进道路上还会看到 ， jQuery Mobile 会使 
用不同的 data -* 厲性来完成任务。 



-个阇辈的作尨 


-圍- 

index.html 


謹 

findeventhtml 

t 

古 <5— 个 赍找攀 件的资 
乇. 不过 0 铂这 只甚一 


tartans.html ( 

_ ) 

tartans 


^ ^花格韦例 

子辦居軚含#论达个 



现在增加 一个类 似导航的链接列表，链接到这3个子页面。编辑 index . html , 在主内容 
< di V > 中的介绍段落后面增加一个非常简单的 < ul >。 列表元素的文本应该就是子页面的名 
字：分别是 About Us , Find an Event 和 Popular Tartans 。 

\ 稍后我 fH 衾加本的链 族不过 
现在它们 只扈文 本. OK： 
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data - role 很活跃 



基本 HTML FTW ! 

<p>The Tartanator is a community-built association 
of groups, businesses, and individuals bent on keeping 
the Scottish heritage alive overseas by promoting the 
understanding and enjoyment of <strong>tartans</strong>.</p> 

<ul> 

<li>About Us</li> 
li>Find an Event</li> 
li>Popular Tartans</li> 

</ul> 

</div><!-- /content --> 

index.html 



建交 jQuery Mobile 列表 

如果保存你的修改，并在浏览器中査看 index . html ， 
可能会注意到这个小列表#起来并不让人满意（感 
觉没有“移动性 ”）。 这是因为我们还没有通知 
jQuery Mobile 希望它注意这个列表的存在。这里需 
要再次使用 data - role 属性！ 


The Tartanator 


c®. 这4个乐 I 
逢的 f 1 ) 表- 


The Tartanator is a commumty-duill 
association groups- Ixisioessos and 
individuals bent on keeping the Scottish 
heritage abve overseas by promoting Ihe 
understandirtg and enjoyment ol 


• Rod an Event 

• Popular Tartans 


<ul data-role»"listview"> 


^ ^ data roU9kf%% injGueru MobiU. 
龙把 O 处1|巧 •"个 fj 表蜱哽 


这輯一皋 . jdzucry MobUe 妖含相在 
蟪设 Eii 个列表的 样式 . 

的 m 




jO-uery 舍修联 

data—rolej^ listview$h 

户笮，银它奢起未 : fe— 
个移动衣妗、 X 有夯互 
惟的到砉。 


在 index . html 中为 < ul > 增加 data - role 属性，再在浏览器中查看这个页面。 
你认为 jQuery Mobile 会如何设置这个列表的样式？ 
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我们的列表好多？，侄坯不完奚 

默认地 ， jQuery Mobile 会把 listview 当作页面内容来处 
理， < li > 元素会占满锥个屏幕宽度。在我们的登录页面 
上，这看起来不美观，还很压抑。 

对我们 来说，导航列表是内 容的部 分，而不是全 
部 。 jQuery Mobile 还有种 列表选择，即内插列表，也 
就是包含这些列表的页面上还有其他内容。下面就使用 
这种内插 列表。 


第一次當试一^ 

2个列表罨起來比较 
轉. 夯螫異 


The Tart 
associari 


s a community-buill 
ctaTkm of groups, businesses and 
individuals benr on keeping the Scottish 
heritag« alivs overseas by promoting (he 
understanding and enjoyment ol 
tartans 


<ul data-role= M listview" data-inset="t 




向 index . htm 丨中的列表增 
加 data - inset 属性，再试着查 
看这个页面。 


蓽二 : fc 金该、， 


内竑的豪昜起 - 

來妗多 ： K 


The Tartanator 


TTie Tartanator is a community-built 
association of groups, businesses and 
individuals bent on keeping the Scottish 
heritage alive overseas by promoting the 
understanding and enjoyment of 
tartans. 


Popular Tartan* 


Bring forrit the t". 



你说的对。 下面就 来链接这箜页 
面！ 

现在要为 Tartanator 多加几个页面， 
而不再只是一个页面演独角戏了。 
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jQM 链接 


用 jQuery Mobile 链捿到多个页面 

jQuery Mobile 中要链接到其他页面相当简单。我们要做的就是 
增加基本的 HTML 链接： 


<ul data-role="listview" data-inset="true"> 

<li><a href="aboutus.htanl">About Us</a></li> 

<li><a href= M findevent .html">Find an Event</aX/li> 
<li><a href="tartans .html">Learn about Tartans</a></li> 

</ul> 



index.html 




把这些链接增加到 index , 
html 中的列表，然后做 
个测试。会发生什么？ 


產过携 知链竑兴 D 含 
亡鉍饵 f .) 达螯爸決®好 •. 

的 M 戏,. ^ 


The Tartanatpr 


The Tartanator is a community-built 
association of groups, businesses and 
individuals bent on keeping the Scottish 
heritage alive overseas by promoting the 
understanding and enjoyment of 
tartans. 


About Us 
Find an Event 
Popular Tartans 


o 

o 


The Tartanator 


Error Loading Pag© 


heritage alive ov< 


erseas by promoting the 


( IfO 中斬的赵茲 
时 . jcsuery M 舭含电法泛 


=r ， ng ， oy ； ;mo r 


About Us 
Find an Event 
Popular Tartans 


o 

o 

o 


Bring forrie thet.. 
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jQucry MobHe 的亮登场 

本周 访谈： 

jQuery Mobile 如何处理登录页面？ 


Head First ： 我听说你有话要对我们说，要告诉我 
们“页面”对你来说到底是什么。 

jQuery Mobile ： 没错！这是我对自己最满意的方 
面之一，所以我想解释•下。 

还记得吧？之前一个页面的结构使用 r 一个 < div >, 
而且 data-role 值设置为 page 。 

Head First ： 当然记得。 

jQuery Mobile ： 包含在那个 < div >+ 的标记（通常 
包栝一个页眉、内容区和页脚）在我看来就是一 
个页面。 

Head First ： 那么其余的 HTML 标记做什么用呢？ 
只是些边角料吗？ 

jQuery Mobile ： 当然不是！在按我的原则建立的 
web 应用中，每个 HTML 文件都是一个独*的、自 
治的页面，都可以在浏览器中访问。 

Head First ： 我不明白。如果每个 HTML 文件都是 
独立的，那又何必还要有 data-role 为 page &< div > 
呢？ 

jQuery Mobile ： 先退一步讲。你第一次导航到我 
的网站或应用的一个页面时，这个页面会像 Web 
上的所有传统 HTML 页面一样进行 加载。 

但是，一旦加栽了第一个页面，我就有所不同 
了9你点击链接时，我会从所请求的 HTML 文档 
找到页面内容，也就是 data-role 为 page 的 < div > 
中的内容，再利用 AJAX 把它插入到当前页面的 
DOM 中。 


jQuery Mobile ： 当然有意义，如果你听我说完！ 

我不再请求和下载整个页面（包括脚本、图像、 
样 式）， 然后再从头开始重新初始化并重建 
DOM ， 现在我只需要挑出我关心的部分。这样可 
以节省 HTTP 请求、带宽和处理时间，让用户得到 
更自然的体验 B 

Head First ： 如果内容部分是动态加载的，我怎么 
在桌面浏览器的地址栏上看到我点击的那个链接 
的的 URL 呢？ 

jQuery Mobile ： 尽管我的导航模型外表看起来很 
朴实，实际上它城府很深。我一直都在努力为应 
用中的页面提供真正的 URL ， 即使页面实际上是 
动态生成的，或者一个 HTML 文档中有多个 data - 
role 为 pagem < div > 标记 B 

通过为 Ajax 加栽的内容块提供一个唯一、可重用 
的 URL ， 我可以让它们看起来就像*个完整的 
Web 页面。浏览器允许时（要知道不是所有浏览 
器都允 许）， 我甚至还可以在异步加载新内容时 
吏新浏览器地址栏中显示的 URL 。 

Head First ： 如果我理解得对，这么说，我可以直 
接访问应用或网站中的各个 HTML 文件，不过链 
接时这些文档的内容可以独立地动态获取，这样 
可以改善性能和响佐性，是吗？ 

jQuery Mobile ： 完全正确！ 

Head First ： 非常感谢， jQuery Mobile , 与你交谈 
真让我们收获不小。 


Head First ： 不过这有什么意义呢？ 
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没有 JavaScript 时的妥善降级 



即使根本没有 JavaScript 支持 ， jQuery Mobile 也 
能正常工作。 

还记得吧，标记中的链接刚开始只是“基本的 HTML 链 
接”。是 jQuery Mobile 的 JavaScript 施>了敢法，对于那 
些支持 JavaScript 的浏览器 ， jQuery Mobile 会把这呜链 
接转换为动态的 AJAX 式链接。 



是采用老式的 Web 导航，所以仍然可以正常 J ： 作。 



I 如果用 Ajax 加载页面，为什么 
还霈要创建单独的页面呢？难道不能 
把应用的所有内容都放在一个页面 
上，再使用 jQuery Mobile 来显示和睇 
藏吗？ 

当然也可以，不过这徉一来，你 
会去掉 jQuery Mobile 的一个很好的 
特性： 漸进增强.那痊不支持高级 
JavaScript , 能力不太强的移动浏览器 
就会被冷落到一边 B 

另外，这个页面会变成一个庞大 ，复 
杂的文件，这个文件不仅很睢维护， 
而且有一个孓重的 DOM , 对于能乃 
较弱的手机来说将很难处理 . jQuery 
Mobile 鼓励你像以往那徉创建《站和 


应用，即钊建单独的 HTML ， 它们可 
以独立存在，也可以用 Ajax 加载。 

1^5) ；jQuery Mobile 怎么知道要用哪 
个 data / 厲性？在哪里可以找到所有可 
用 data - •厲性的倌息？ 

^ :开发人员可以为 data -* 爲性构 
速他们喜欢的任何名字（嗯，必須以 
字母开头）.对此没有相关规定•重 
点是. data -* 爲性要与它们所在网站 
的功能有关.也就是说，它们不用 
于向外部应用传遂数据。由于这个原 
因， Web 开发人员可以充分自由地生 
成他们自己的 data -* 命名约定. 


:我们在使用 jQuery Mobile 的哪 
个版本？ 

: jQuery Mobile 开发小组真是很卖 
力！在我们写这一幸这短短的时间里， 
就已经发布了 1.0 beta 3和 1.0 Release 
Candidate 丨版本，我们又得奋力赶上 • 

嗖， 等一等，我们刚查过。 I .0 RC 2 现 
在已经过\了！ 嗖， RC 3 也是！哎呀， 
这阕 直比子弹还飞得快！现在已经官 
方发布了 jQuery Mobile 1.0! 

对于 Tartanator ,我们会使用1 0 RCI . 
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页脚（重）构 


在230页上已经看到，在窄屏幕上页脚中的文本被截断了。 

这是因为 jQuery Mobile 要在页眉和页脚中为标题元素周围放罝按钮留出空间，不过我们的页 
脚中没有按钮。现在来修正这个问题！ ,~ Muuurus - 


Find an Event 


Popular Tartans 



软认祕. MobUe 食 
衿灸枣扣否脚中的杉蛀无彝 
(<hi> 苓）沏 ® 放 « 接狂髮 


太砝. 


0 删除包围页脚文本的 < h 4> 元素。 

现在页脚文本包围 在一个 <»14>元素中。通过去除这个标题元素，就 
可以不让 jQuery Mobile 为按钮留出空间 《为 按钮留出空间还有一个副 
作用： 会截断文 本）。 


<div data-role= M footer n > 

<h4>Bring forrit the tartan 
</div><!-- /footer --> 


index.html 

0 增加一个 css 规则，将页脚文本居中，并指定页边距。 

遗憾的是，删除 < h 4> 也会同时删除居中设置和页边距。需要在我们自己 
的 CSS 中考虑这个问题， 

在文本编辑器中打开 tartans / tartamcss ， 把以下规则增加到这个文件的 
最上面（文件中已经有很多 CSS 规则> # 


r 【 data-role="footer"] { text-align: center; padding : 5px 0;} 

tabercrombie { background-image:url( f icons/abercrombie.png*); 



器含在用 f*1 data koU 母 H 


tartans.css 


Ks 丨 ： A - 
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页脚 （重） 构练习 


页脚（重）构 


0链接样式表。 

再来编辑 index . html , 增加一个样式表链接。 



要修正这两个问題，需要对页 
脚 < div > 做两个小小的修改。 

我们想告诉 jQuery Mobile 使用 
固定定位让页脚固定出现在页 
面最下方，另外需要改变主题 
swatch , 使页脚在视觉上不那 
么突出。 
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1 


Q 在页脚上使用固定定位，使它总出现在相同的位置上。 

使用 data - position 厲性，并设置它的值为 fixed ， 这就是在告诉 jQuery 
Mobile 对页脚元素使用固定定位。这样一来，它就总能固定出现在页面 
的最下方 # 


0 使用一个不同的主题 swatch , 使页脚不那么突出。 



jQuery Mobile 的初始样式表有 S 个默认的颜色组.这称为 swatch 。 这 S 个 
swatch 分别由字母 a 到 e 引用。 

默认地，页眉和页脚元素会采用 swatch a , 这种反差最突出. ^ 

swatcW a f 1 ) e 的妖 A 树名 

我们的页脚并不是一个特别重要的页面元素，目前它的视觉反差太大了 6 

通过指定为 swatchc , 可以让页脚看起来不那么突兀。 ^ 


可以在任何元素上使用 data - theme 厲性来覆盖 jQuery 为该元素设置的默 
认 swatch * 


<div data-role="footer” data-position="fixed" data-theme 

Bring forrit the tartan! 

</div><! —— /footer —— > 


就这么简单！现在页脚应该看上 
去好多了！保存所做的 ft 改，再 
在一个移动浏览器或模拟器中査 

看改进后的页脚 一 个旃的 izolLtrX 

° ft. 迻主嗜用 審卷. 有关栌 S 多内 

容夺 C, http ： //j^M.ery vv^blU.oo»o^hc^terolUr/ u 



J 
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引入花格布 


Tartawator 的核 心： 花格布 


下面来看现在已经完成到 Tartanator 项目第 I 阶段的哪 
一步： 

[7 j 构建内容页面和网站结构。 

需要创逮基本板块和页面.并创建一个整体结构. 

我们枣本4忐 . 4釗 


□ 创建花格布列表。 

对干第•阶段，我们将创建一个包含现有流行花格布图 
案的列表。花格布板块应当是一个浏览界面，当然，感 
觉要像个应用，而且要面向移动设备。 

下一个 ft 务 1 / 


□ 构建花格布创作表单的一个原型。 


The Tartanator 


The Tartanator is a community-built 
association of groups, businesses and 
individuals bent on keeping the Scottish 
heritage alive overseas by promoting the 
understanding and enjoyment of 
tartans 


About Us 
Find an Event 
Popular Tartans 


o 

o 

o 


Bring forrit the tartan! 


龙 I ： 也不嗶神突出成功 


•’夺 • ％蚊 古宅读3 个分务 


我们已经有了核心的内容页面（至少有了这些页面的骨 架）。 
现在要转移视线，来关注更有意思的部分：花格布本身。 


对干第 I 阶段， Tartanatoi ■允许用户浏览一组流行的花格布图 
案。可以认为这就像是一个快速的花格布参考。 


+动手做 

♦ 


把 tartans.html 从 extras 文件夹复, 

制到 chapter 文件夹（也就是说"你 的&叩 求 中己经 珩-个 
把它上移一层 ）• tartar 0 * (ft 含备个 


5fcJltartah8.html 


tartans . html 文件已经有-个初始的流行花格布列表 (< ul > h 为 
了便子你起步，这个列表包含了名字以 A 和 B 开头的花格布 。一 
旦把 tartans . html 文件移到合适的位置，在浏览器（移动或桌面 
浏览器）上加载 Tartanator ， 査看这个 K 面。可以点击这些花格 
布名字，访问相应的花格布页面。 
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列表领先一步 


華一次 ##总袼4列表. 

戏扪6轻衿伢泶踭5 




在格4朽表叛一个 苞含花 
硌 4 列表的 HTML 毋 砺务… 



tartans/baird.html 


S 个花格 4® t 部车 
tl 己的乐 
花路4甚一个 C^ss 角 
f ® 体 


让列表麻雀交 aa 


与花格布信息页面本分相比，花格布列表看起来太平庸 j \ 好消 
息!利用 jQuery Mobile, 你可以很轻松地在列表中加入缩略图，这 
样列表本身可以有小图标（这就漂亮多了）。下面给出一个 例子： 


•'•S 抟 . 弒 (i 彡第辈 伐| 光的 c 基 
ff 九一个 jc^utru MobtU-> # 


<li><a href= H tartans/abercrombie.html"> 

<img arc*"tartans/icons/aborcrombia.png" alt= n Abercrombie" 

<h3>Abercrombie</h3> 

</a></li> 


/> 



在 tartans.html 中为列表项增加缩略图 。 图标放在 tartans/icons 目录中，与其 HTML 文件同 
名（不过扩展名是 .png) • 
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练习答案 


<ul data-role= ,f listview n > 

<lixa href="tartans/abercrombie.html"> 

tlOH <img src=”tartans/icons/abercrombie.png" alt="Abercrombie” /> 

<h3>Abercrombie</h3> 

</a></li> 

<li><a href=*'tartans/arbuthnot.html"> 

<img src="tartana/icona/arbuthnot.png" alt="Arbuthnot" /> 

<h3>Arbuthnot</h3> 

</a></li> 

<li><a href="tartans/baird.html n > 

<img src*"tartans/icons/baird.png" alt»"Baird" /> 

<h3>Baird</h3> 

</ax/li> 

<li><a href="tartans/barclay-dress.html w > 

<img 暴 n 雪 /icons/barclay-dress.png" alt-''Barclay Dress" /> 

<h3>Barclay Dress</h3> 

</ax/li> 

<li><a href= H tartans/barclay.html"> 

<img src="tartans/icons/barclay.png" alt= ,, Barclay /, /> 

<h3>Barclay</h3> 

</ax/li> 

<li><a href="tartans/birrell.html n > 

<img src 皿 "tartans/icons/birrell.png" alt"»"Birrell" /> 

<h3>Birrell</h3> 

</ax/li> 

<li><a href= n tartans/blair.html"> 

<img src^"t&rtans/icons/bl&ir.png" alt 黨 "Blair" /> 

<h3>Blair</h3> 

</ax/li> 

<li><a href=*'tartans/borthwick-dress.html w > 

<img 8rc="t*jrtans/icont/borthwick-dres8.png" alt* /f Borthwick Dreaa r, /> 

<h3>Borthwick Dress</h3> 

</a></li> 


<lixa hre f= w tar tans/borthwick.html"> 

<img src 工 "t 暴 rt 篡 ns/icons/borthwick.png" alt^^Borthwick^ /> 

<h3>Borthwick</h3> 

</a></li> 

<li><a href= M tartans/bruce.html"> 

<img srdartans/icons/bruce.png" alt="Bruc_” /> 

<h3>Bruce</h3> 

</ax/li> 


<li><a href= w tartans/buchanan.html M > 

<img src="tartans/icona/buchanan.png 〃 alt="Buchan&n" /> 

<h3>Buchanan</h3> 

</ax/li> 

</ul> 
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加入其余的花梏布 


还有更多的花格布需要增加到这个列表中（当然 
还包括它们漂亮的图 标）。 不用构心，我们不会 
让你输人太多代码。可以在 extras 文件夹中找到一 
个 tartan - list . txt 文件。在这个文件中，你会发现一 
段 HTML 代码，这是一个包含所有花格布的完整的 
< ul >。 把这个 < ul>i [制粘貼到 tartans . html 中，替换 
掉当前的 HTML 列表。 


3 - 


个增? I 的列彖（衊耷‘: 1 熹 
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即时提供过滤的、有组织的列表 

过滤和组织列表 


0可以增加列表 分割条。 

通过使用列表分割条 (divider). 可以把列表分割成多 
段。这有助于组织列表，将花格布按其首字母 分组。 


O 可以增加一个列表 嫌器。 

利用 jQuery Mobile, 可以很容易地为列表引入过滤器 B 
过滤器看起来就像是一个捜索域（有一个小放大镜之 
类的图标），用户在这个域中输入时，将对列表进行 
过滤。这里完全不需要编写任何 JavaScript 代码！ 


^ata fUterMH. 



-Ust-divirf 仪-的 


<ul data—role="listview" data-filter=”true"> 

<li data-rolo= f, list-divider">A</li> 

<li><a href =,, tartans/abercrombie .html'*> 

<img src=*'tartans/icons/abercrombie.png" alt="Abercrombie" /> 
<h3>Abercrombie</h3> 

</a></li> 


tartans.html 



为 tartans.html 中的 <ul> 指定 一个过 滤器域 和一些 列表分割条。为每个字母增加一 
个列表分割条（除非没有以该字母开头的花格布，如 Q 和X) . 

保存所做的修改，在浏览器中查看结果。很棒，是不是？ 
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tberejwre no 

Dumb Questions 


r®) I ■我注意到， 你改变一个 jQuery 
Mobile Web 应用中的页面时，会有一 
种动画效果。那是怎么回事？ 

^ : 为了让 Web 应用感觉与移动用户 
界面糢式更一致， jQuery Mobile 对页 
面变換应用了一种过渡效果。 

默认会使用幻灯片过渡，新页面将 
从右边潸入.要改变所使用的这种过 
波，可以对当前链接增加一个 data- 
transition 属性。它支持大约 6 种不同 
的过渡效果，有关的详軔信息参见 
jQuery Mobile 文档（見其网站）。 


这个特性在所有手机上都能用 
吗？ 

¥ ^没有哪种侈动怄架能做这种保 
证，不过 jQuery Mobile 在努力尽可能 
提供更多的碲平台支持。可以在 hup:// 
jquerymobile.com/gbs 看到所支持的设 
备和浏 JL 器列表，了解它们目前的支 
持程度 


1^) I如果一个设备或浏览器没有得 
到支持会怎么样呢？或者，如果关闭 
了 JavaScript 呢？ 

V “Query Mobile 非常偏重漸进增 
强。我们的底层标记就采用了这种技 
术！ 

你何不自己试试看呢？在一个禁 
用了 JavaScript 的 Web 洌見器中加戴 
Tartanator. 当然了，它并不漂亮，不 
过确实能正常工作。 
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客户反馈 


向 EwaH 展示 Tartaiiator 的 罕期阶 
段成果 

我们的项目完成几个步骤了？ 

[7 J 构建内容页面和网站结构。 

[ Vj 创建花格布列表。 

□ 构建花格布创作表单的一个原型。 

开始创逮表单之前，先与客户沟通一下，确保目前为止 
整个方法没问题。 
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Jim ： “让它感觉更像一个原生应用”，这到底是什么意思？ 

Frank ： 感觉这是一个非常主观的要求，不是吗？我想 Ewan 
寻找的是一种感觉更像“应用”的东西。 

Jim ： 这是指……？ 

Frank ： 我想是不是像标签页、导航元素、按钮和图标之类 
的东西。比如，看来 Ewan 对这种过渡效果很满意。对他来说， 
这些感觉就是原生的。 

Jim ： 不过我们不是在冒险吗？这样会不会过多地效仿某一个 
平台而忽略了其他平台呢？ 

Frank : 嗯，没错。人们谈到“原生”时，有时他们只是想表 
示“让它看起来像 iOS ” ，这可能很危险。每个平台都有自己 
的 UI 标志。 

Jim ： 听起来就像“第22条军规”，为了让顾客满意，我们要 
让它看起来像原生应用，而这可能会怠慢另外一些用户，比 
如 Android 和黑莓手机的用户。 


Frank ： 我想我们需要对某些方面进行改善，让 Tartanator 感觉 
更像是一个应用，而不是让它看起来像是一个 iPhone 应用。坦 
率地讲 ， jQuery Mobile 元素本身看起来确实有点 iOS 范儿。所 
以我们已经有一定的基础了。 

Jim ： 这么说，现在的目标是让 Tartanator 感觉更像是一个应 
用，而没有必要让它看起来是特定于某个平台的原生应用， 
是吗？ 

Frank ： 完全正确。我会把我的想法先写下来，我想可以做几 
个修改来达到这个目标。 


新 目标： 让 Tartanator « fi 来更像 
是一个应用，而没有必*看起来特定 
于某个平台。 
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增加一个资脚工爯栏 

在 jQuery Mobile 中，很容易在页眉或页脚中增加一个固定位置 
的工具栏。为了更像一个应用，下面在页脚放罝一个工具栏, 
而不是在登录页面的 < ul > 中给出指向 Tartanatoi ■各板块的链接。 

构造导航栏 

在页眉或页脚容器中（由 data - role 属性指示），我们可以再放 
一个 data - role 为 navbar 的 < div >。 这就告诉 jQuery Mobile 要把这 
些内容处理为工具栏中的按钮。基本构造如下所示： 


含耗 Mobile 分 

它 f 起来深！ 一个 （噍 
.较名罢义） ^ 、 

括搞毬 （卯 財、 
越）坍故在 


在导航栏中放入按钮 

我们不再用一个垂直列表组织链接，现在要通过工具栏按钮 
i 方问 Tartanator 的主要板块。这种方式会更像-个应用。 

jQuery Mobile 会自动将导航栏中的列表元素转换为按钮。 



•:主鱼栽们》)咳3 
data 鷹作。 




龙记 fi. 我们去姊？ 
flboutucs.VttvwI 灸面 . 
现 htvva 
费 ^ ^ About ^ ^ , 
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像图标的工具栏按钮 


让工爯栏更时尚 


到目前为止还不错，不过我们的工具栏按钮有点单 
调 。 jQuery Mobile 提供了一组大约18个默认图标，可 
供使用。下面使用 data - icon 属性放入一些图标。 


0 镔的抬纽$孑垃粟 


9用的蚊认®钐列表 g 以咨 
j«uery Mobile st 柚中找 f .) 6 


达 罨起來後抬任. 2不待. 
不 (22 可•:单气一魚“ 


<div data-role="footer" data-position="fixed" > dat f" LC ^.^ - 

<div data-role=-navb a r-> _^ 

<ul> r~~ 法用哪个 ㈣ 、 

<lixa href= M index.html" data-icon«"info M >About</a></li> 
<li><a href="findevent.html" data-icon* M »tar w >Events</a></li> 
<li><a href="tartans.html M data-icon* n grid">Tartans</a></li> 
</ul> 

</div><1-- /navbar --> 

</div><!-- /footer --> «.* - 


index.html 


另外，下面在适当的链接上设置一个 ui - btn - actWe 类，指示用 
户当前正在査看哪个版块。按照主题设置会将它突出显示， 
这样看起来这就是当前的活动链接。 


这个代袋故在 v 4典他英番 
中， g 槐镎把 ii 个炎撺 宅趵浼 劣的锚 
铉记. 


<ui> 

<li><a href ="index. html" data-icon="info •’ claM*"ui-btn-activ«">About</a></li> 
<li><a href="findevent.html" data-icon="star">Events</ax/li> 

<li><a href= M tartans.html" data-icon= M grid">Tartans</a></li> 

</u 
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最终碥定结构 



再来査看我们的任务列表： 


t 扣代砝 ® S - 子的專杈輕 


tzf 




把登录页面上的链接转换为带图标的工具栏，总 
在固定位置出现。 

去掉单独的“关于我们”页面，因为这个页面 
的内容还没有得到。现在考虑把当前的登录页 
面作为“关干”页面。 

让页眉也一直出现在固定位£。 

现在只拿《相梢该 f 否香…… 


嗅，对， Web 上《是这样！需求总在变。 

我们已经把页脚换成了一个导航栏，不过不用把 
这个口号完全丢掉。下面让它作为登录页面上的一 
个子标题（只在登录页面上出现）。 

让页眉也出现在©定忮蚤 

既然已经做到这一步，下面让页眉也有固定的位 
罝。类似于页脚，即使用户滾动界面，页眉也总 
是出现在屏®最卜.面。 



<div data-role="header" data-position= n fixed" > 


<hl>The Tartanator</hl> 

</div><! —— /header --> 

<div data-role =, 'header" data-theme="b" class="forrit">Bring forrit 
the tartan!</div> 


index.html 
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测试与反馈 


——试—试- 

哈， 交互式设计，这正是 Web 之道。下面更新 Tartanator 。 

0实现新的页脚导航栏。 

编辑 index . html 、 findevent . html 和 tartans . html 。 把页脚替换为我们在 
250页上完成的版本。 

根据具体的页面，确保为正确的锚标记指定 ui - btn - active 类。 


Q 为页眉 指定一 个固定位置。 

为每个页面上的页眉增加一个 data - position 厲性， 

0为登录页面 ( index . html ) 增加口号。 

为 index . html 增加口号作为一个子标题（只在这个页面上增加>， 



The Tartanator 

Bring forrit the tarfo, 


丁 he Tartanator is a commun 
association of groups, busrm 
individuals bent on keeping 
heritage alive overseas by pi 
understanding and enjoymef 
tartans. 


Abercrombie 


Arbuthnot 


毋枣和西蜱规奋郄 4® 左的，它们慧甚 
( 分 列〉 出璁存贡 * 栌 Si 蒂和蚤下蒂 . 
印货用户 I ：下涑鉍.它 f) 的泛 g 也不龛 
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建交花格布创作表单 

对于这个项目，下一步是创建-个表单原型，允许用户在他们的移动浏 
览器上设计自己的花格布。 

[7 J 构建内容页面和网站结构。 

[ Vj 创建花格布列表。 

□ 构建花格布创作表单的一个原型。 

Ewan 希望用户能够使用一个类似应用的移动界面， 

创作他们自 d 的花格布。 



花格布设 计就像 是一个菜谦， 

不过，并不是一个食物配料及其用 a (盎 
司、克、 匙等） 的列表，这个列表会列出 
+同颜色及各种颜色在图案中的相对大小 # 
织花格布时，会在水平和垂直方向 重复编 
织这个图案。 

我们要大致了解花格布是如何合成的，这 
样才能建立一个表单，收集适当的信息。 
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一个花格布配方 

花 格布； 檢案就像菜谱 

下面举个例子。要创建 Carmichael clan 花格布， IU 案如下所 
示： 


中的备个喊分4 

颜色 

大小 

(针） 

一个 ** 釉疙大 •) •-吋 


6 



72 


56 



4 



4 


芘格布紀方 



CamclclnfleL ciat^ 
花格 4 


要织这块花格布，需要按顺序依照阁案编织（这黾我们要用像素 
而不是毛线来“编织”）。 


对干 Carmichael , 先织6针黑色，然后是72针绿色，接卩來是56针 
蓝色，如此继续。 

达到图案中的最后一个颜色时（在这个例子中就是6针 黄色），/ 
洱按逆序编织图案（蓝，红，蓝， 绿）。 再次达到第一个颜色(黑色） 


第一个扣后一个揪在（蕈和梦* 
不左凌 4* ^^ fTarta ^ ator . (i 普 
•4 好中的 ‘ W 心”， 


时，再循环反复。水平和垂直方向（经线和纬线）都按这个图案 


编织，最后得到整个花格布图案。 

Y % 





t BE 

tt v 


□ 




来田反4- 


嗱 …… 这弒 4上面 
的 fff . P . T-iliA 
f 甚水孕；不籩垄 



我们要创建表单域.收集用 
户花格布设计中各个成分的 
顔色和大小值。 
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拕花梏布珍索转狳成一个表单 


下面来看我们想构建的这个表羊原型。 


我们需要一些域，允许用户输入颜色- 
大小对，来建立一个花格布配方。 


左格4名 S 芍以 眘一个 
将达 (* T ^) , 



OK 。 我们已经基本明 磽了要 
构建的表单。下面就来构建 
这个表单！ 



咚布《方的威分 列褎， 



创建一个 jQueryMobile 空页面，在其中包含这个花格 
布创作表单。参考 tartans . html 创建一个空页面 a 使 
用同样的页眉和页脚，不过把页面的标题和页眉改 



为 “Tartan Builder ” • 把这个文件命名为 build . php 。 
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HTML5 表单结构 


表准本身是-个标准的 HTML 5 表单 ： jQuery Mobile 会 
对它进行调整，使它感觉是移动友好的。在第7章中， 
我们将让这个表单完成具体工作，包括利用 JavaScript 
增强其交互性，并生成真正的花格布图像。 


-私格％ j 南遂 c 可 

-一条 热 K 
\\ 1 ^ 


对现在来说，我们只打基础，创建•个没有花哨装饰 
的基本表单，让它在几乎所有移动浏览器中都能正常工 


我们希望用户能够对他们的花格布命名，另外还可以 
输入一个描述（可选）。然后，可以定义颜色-大小组 
合來建立图案 本身。 下面把表单分为两个主要 部分 ： h 
半部分收集关于花格布的元数据，另外一部分用干定 
义图案的颜色和大小。 
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増加一些基本的域 

元数据表单域用来输入花格布名字和描述，这些表单域很基本。 
我们将分别使用一个文本 input 和一个 textarea 域实现。这里使用的标 
id 和你以往常见的几乎没有什么差别，只不过这里利用了 HTML 5 的 
placeholder 属性。 

另外经过精心设计，我们还在适当的地方使用了可访问的 label 元素。 

占话 i 本用> 至產个蛾斿件玱其内容时.占心二 31 各 
埒衾••消吏_、 


<li data-role= n list-divider H >Tell us about your tartan</li> 

<li data-role="fieldcontain"> 

〈label for="tartan_name">Tartan Name</label> 

<input type:"text" naxne="nazne" id?="tartan 一 name" 
placeholder^"Tartan Name” /> 

</li> 

<li data-role="fieldcontain"> 

<label for="tartan 一 info">Tartan Info</labQl> 

<textarea cols="40" rows="8" name:"tartan 一 info" 
id?="tartan_info’’ placeholder^"Optional tartan description 
or info"X/ textarea> 

</li> 

<li data-role= M list-divider f, >Build your colors</li> 

build.php 


为 JQuery Mobile 授供域的揸示佶患 

你可能已经注意到，上面各个域都分别在一个 data-role 为 fieidcontain 的 
元素中。 data-role 为 fieldcontain 就是向 jQuery Mobile 提供一个提示，指 
示这个元素中的表单域可以进一步增强。 

戏们僅用 *5 —个 < UC L > 进•表輦 的以 苞含 
铪入蛾的各个< Lt >养宅八类 
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嵌套列表 


嵌耷列表允许用户增加顏色 

花格布图案的每一部分都是一个颜色和一个大小（宽度）的 
组合。達立布局时，我们将把每-对颜色和大小组合域归组 
到•个 < li > 中。为了保证提供最基本的用户体验（也就是说， 

在不支持 JavaScript 的浏览器 h 也能正常工作），我们将用 
PHP 生成 6 个这样的表争域组（这样可以少输人代码）！ 

下面的代码可以作为 起点： 备- 时舷疤 分糾笆含在 

一个 cti> 中. 也鱿蕞迭. 苗个 <U> 穷 


<li data-role="list-divider ,, >Build your colors</li> 

<?php for ($i = 0; $i < 6; $i++) : // 6 color fields ?> 
<li class="colorset"> 



</li> 

<?php endfor; 

</ul> 


?> 




杨疙和之 .) • 嘁 沒沒 cif 




build.php 


达个 PKP for 竓 I ? •衾 
表辈蛾组、 


R =为什么没有把这个 < li > Wdata - 
role 指定为 fieWcontain 类?它里面也 

有域啊 u 

:每个这样的 < li > ( li . colorset ) 实 
际上包含两个域。构建这些域本身 
时，会把它们分别放在其自己的 < div > 
中，并把那个<<1卜>的 data - rolc 指定为 
fieldcontain 0 



■我糊 涂了。 该为哪种元索指定 
fieldcontain data-roleJK 性呢？ 

只要元素中包含域本身，也就是 
说，域的 立 接父元素都可以指定这个 
展性。比如 < li >^< div >^< fieldset >^ 
< p > (或者诸如此类的元 索）. 

如果 data - role 为 fieldcontain , 就是在 
告诉 jQuery Mobile ： 增强表单时要把 
这个元素包含的域及其标签组合起 
来。因此.每个 data - role 为 fieldcontain 
的包含元素都应该包含一个域（及其 
label ). 


I 霈要使用 PHP 来完成项目的这一 
部 分吗？ 

•没错！我们就要进入 Tartanator 的 
功能实现部分了，接下来将使用 PHP 
来完成设计和处理。 
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顔色-大小 域对： 额色选择域 


每组颜色域都有一个颜色 (< select >) 和一个大小输人域。这里指定了 
类 color - input 和 size - input ， 以后用 JavaScript 增强表单时会用到这些类。 

显然，我们不希望只有黑色和白色可以选择！有关的更多内容稍后讨 
论。 



如 I 柃泛用 HTML 觖 疙松入 
在氓多到羝器中却 耒項到 



<li class="colorset’’> 

<div data-role= "fieldcontain" class="color-input ,, > 

<lab«l class="select" for= n color-<?php print $i ?>"> 
Color</lab©l> 〆 

<select name: 11 colors 【】 •’ id=" color-<?php print $i ?>" > 
<option value-"">S«lect a Color</option> 

<option value - "#000000" >黑</ option 〉 

<option values>Khit«</option> 

</select> 

</div> 

</li> f 
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限定范围 


顔色-大小域对：大小域 

我们使用了一个 HTML 5 新增的输入 类型： range 。 这个域类 
型在现代浏览器中得到了越来越广泛的 i 持（不过当然还 
没有完全普及）。在支持这个类型的浏览器中，它会显示 
为一个滑动条，在不支持的浏览器中，会降级显示为一个 
文 本域。 jQuery Mobile 进一步增强了 这个滑 动条， it 它变 
得更加移动友好。 


扣从狀霣沒的0用秩名 S 义 
友义域的蕞 .) •如蕞 


花格聲 ff 1!{的 

保教的吁 •: i 一 
寿 .. st 吓爆 fl 在 


在荃子 WebKit ； 的现代栘# 
闲妃器 i . 工*®杓域含釦 
扑 S •子， 




, i 葙分杖枝存我们利才疙 
澧的 〈 select > 后 


260 第6章 




使用框架构建稃动 Web 应用 


-试 


€ja 

w 


把它们集合起来， 构建一 个有移动外观（尽管还没有实际功能）的表单。 


在 build . php 中加入表单域。 

加入256页到260页的标记，创建基本的表单域。 




一个在用 





0为颜色域增加更多颜色选择。 

可以使用 extras / color - Mst . txt 文件中的颜色（十六进制 
值），并（或者）增加你喜欢的任何颜色来完成花格 
布创作。 

保存 build . php , 在一个移动浏览器中加载！ 


Tartan Builder 

Tell us about your tartan 


Tartan Name 


Tartan Info 


我们需要链接到表单，然后 
再以一种类似应用的方式返 
回。现在就开始吧！ 
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过去……再返回 

鍵捿到表单 

这个创作表单是 Tartanatoi •中花格布板块的一部分。我们要为用户提供 
一条路，能够从花格布登录页面（有一个长长的列表，列出了所有现 
有的花格布）进入这个表单。在页眉增加一个按钮应该就足 够了： 


<div data-role="header" data-position= n fixed M > 
<hl>Popular Tartans</hl> 

<a href="build.php •’ data-role:"button" data-icons 
class="ui-btn-right" data-theme:"b">Cre&te</&> 

、 </div><!-- /header --> 


• W 七 right 走僅相扭琯麯 f*) 右 


# ^ j Si swatch >6 b 
含让祐 芘曼突 出一昝 


’plus" 个 * 

HI 

tartans.html 




…… 爯为用户揸供一条®来的路 

再在表单页面 （ build . php ) 上增加一个返回按钮》 



<div data-role= ,, header" data-position=’’fixed"> 

<a hr«f:"tartans.html" data_rel="back" data-icon="baclc 
data-rol«»’’button">Bac)c</^> 

<hl>Tartan Builder</hl> * 

</div><! —— /header 一 - > 


通过为铺标记增加 data - rel = " back ” ， 这会告诉 jQuery Mobile 要把这 
个链接当作一个返回链接。如果可能，用户单忐这个链接时， jQuery 
Mobile 会把用户发回到其历史列表中的上一个位置。另外对于不支持 
这个特性的浏览器，我们提供了一个很好的默认链接地址，在这里就 
是 tartans . html 0 
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c J& 

——试一试- 

Q 从 tartans.html 链接到表单 3 

在 tartans . html 中为页眉增加一个“创建” ( Create ) 按钮。 

0在表单页面 ( build . phpU ： 增加一个返 回按钮 • 

在 Tartan Builder 页面的页眉上增加一个返回链接， 



Tartan Name 


[7j 构逮内容 K 面和网站结构。 

需要为网站创达基本豇面，汴 创建- 个在移动设备 
感觉很好的整体结构。 


[Vj 创违伦格布列表。 

对 r •第•阶段，我们将创逮•个包含现冇流行花格 
布图案的列表。花格布板块应当是一个浏览界面, 
当然，感觉要像个应用， rfdlL 要面向移动设备。 

构让彳 t 格布创作表单的一个原型。 

fi 后， Ewan 希望用户能够使用一个类似应用的移动 
界面创作他们 ft 己的花格布。他想#看这个界面是 
什么样 f, 所以我们要为他设计一个原型。 


耶！我们已经完成了 Tartanator 的第1阶段。现 
在可以让客户检査我们的成果了。 


你现在的位霣 ► 


263 



完工了 






…以落如咖到 

说工 納夂妗。 



BULLET POINTS 


人们想得到真正的应用！怎样的网站才能算是一个 
Web 应用呢？这方面的定义很含糊。与内容页面相 
比，类似应用的网站往往更有交互性。内容和数据 
块通常会异步获取，然后插入到现有的 DOM 中，从 
而尽可能减少整个页面的加载。 

HTML 5 很明确一它是一个规范，表示了超文本标 
记语言 （HyperText Markup Language ， HTML ) 的 
演进。不过 HTML 5 这个词通常还用来表示创建应用 
型 web 体验的一个技术组合。 

从头幵始构建移动 Web 应用可能非常复杂。建议你 
自己动手试试看！不过，对我们来说，这里使用了 
一个移动用户界面幵发框架来助我们一臂之力。 


现在有很多移动 Web 框架（每天还有更多框架产 
生），分别表示不同的方法，强调不同的关注点。 

jQuery Mobile 是一个流行的移动 Web 框架。它与良 
构的 HTML 5 标记关系很紧密，这使得由基本代码 
构建移动界面相当简单。 

在 Tartanator 的第1阶段，我们使用 jQuery Mobile ( 
以及其他 技术） 构建了网站结构，包括增强的 
listview , 页眉，页脚、导航栏和表单元素。 


要让一个 web 应用感觉更像是原生应用， 
一种讲究平衡的艺术，要求精心 考量。 


这往往是 


构建表单原型时我们使用 了一些 HTML5 表单元索 
厲性 。 jQuery Mobile 会在不同移动浏览器上调整这 
些表单元素，包括为那些不提供支持的浏览器做适 
应性调整。 
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(JiereiOre no 

Dumb Questions 


到目前为止， Tartanator 中 
有多少代码是真正的 HTML 5? 也 
就是说，其中哪些使用了 HTML 5 
规范新增的标记或属性？ 

我们使用了很多 data -* 属 
性。这些就是新增的。我们还在 
表单中使用了 range 榆入类型和 
placeholder 属性 。 

对于表单中的大小域.我 
为它的 range 输入域增加了 step 
厲性，不过仍然能输入2到72之 
间的任何值……奇数和偶数都能 
输入。这是怎么回事？ 

^ * 很遣》 . 写这本书 
时， jQucry Mobile 的 range 滑动条 
部件还不支抻 step 属性，我们会 
在第 7 幸提供一个解决方案， 


I 这里只是通过列表来选择 
颜色，这可不算是一种有冲击力 
的用户体验。 

第7章中将增强这个表单， 
我们会增加一些 JavaScript 代码， 
向用户展示他选择的颜色。 

l ®) :不支持 range 输入域的浏览 
器会怎么样呢_? 

只要測見器能很好地支抻 
JavaScript 和 CSS, jQuery Mobile 
就能把 range 域转換为一个清动条 
部件（实际上，对于支持 range 搶 
入域的浏 t 器也会这样做）， 

如果一个浏見器不支祌 range 搶入 
域，而见没有 JavaScript 支持 （或 
者禁用了 JavaScript 支持），很可 
能会把 range 域 JL 示为一个标准的 
文本榆入域 。 


^页眉和页脚有时候会闪烁， 
或者比页面其他部分加载得慢。 
有时滚动感觉有点慢，为什么会 
这样？ 

答 ^ jQuery Mobile 模仿原生体验 
的一种方法是使用固定位置的页 
屬和页脚。在不同的平台上，具 
体实现的方法各有不同。 

需要说明 的是： 尽管这个领 
域发展得非常快，钽移动浏 
見器中对固定定位（在 CSS 
中， positionrfixed) 的支持却不尽 
人意，很分散，甚至很奇佟，对 
此提出了一些解决办法，不过并 
不完美。因此，应用性能 饵尔会 
下降，另卟有时会有特异的表现， 
这些通常就是怄架权衡折中的体 
现，一方面乃图更诹应用，另一 
方面又要坚持 Web 标准，于是就 
可能出现你提到的这痊情况。 



伊 H 丁 M 厶5和它的期 

衣扪构洚：个移动 

看到了吧？在你掌握的 HTML 和 CSS 知 
I只基础上，建立一个类似应用的移动网 
站并+需要太多复杂的步骡！ 
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7 S 实世界的移动 Web ® 用 


超级移动 Web 应用 



移动 Web 就像班里那个小机灵鬼。你知道的，就是那种很让人喜欢、 
聪明能干的小家伙，不过也是捉摸不定、让人防不胜防的淘气包。我 
们尽量不设置太多约束和条条框框，希望不扼杀他们过人的天賦，不过 
现在该是有效利用移动 Web 天分的时候了。利用渐进增强，我们可以在 
更成熟的浏览器中把原本简朴的界面装扮一新。通过建立一种周全的离 
线模式，能够让飘忽不定的网络连接从一种负担转变成一个抢眼的特 
性。另外，通过使用地理定位可以得到移动的真谛。下面就来建立这样 
—个超级移动 Web 应用吧！ 


这是新 的一章 267 






Tartan a tor 还原溶炼 


着着 还不错…… 

现在我们 tL 经完成第 I 阶段， Tartanator 已经很有一副移动 
Web 应用的派头。 



嘴上说得好…… 

这里有按钮。还有导航栏。另外有很酷的贞面过渡。 
我们用 Ajax 有选择地加栽内容，减少了带宽、请求和 
JavaScript DOM 处理。另外在 jQuery Mobile 的帮助下, 
我们的 HTML 5 表单元素也感觉是移动友好的。 
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郏 苟一个萑 子 HTML.5 

•…" 不如傲得好 

第2阶段会在之前工作的基础 h , 把这个强健的 Web 应用（不 
过不能不承认，它还没有具体的功能）变成我们设想的一个 
超级移动应用！ 
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超级移动 Web 应用 


炙实世界的移动应用 

能充分利用固有移动特性的移动 Web 应用通常有某些共同点。 

我们所称的超级移动 Web 应用就像是真实世界的移动应用。 
通过稳妥地使用渐进增强，它们能适应用户不同的设备。用 
户没有数据连接时，这些应用可以采用-种离线模式 X 作。 
而且它们充分利用了浏览器支持的地理定位来提供与位置相 
关的内容。 



轺迈样劫 web 在用5科这一 |筠龙句 
沦个鞾行.璲样幼 web 应用更-茲 
边 • 鲒糾用真④奇的帮大榉劫作 
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r^^rpen your pencil 


怎么完成第2阶段，使 Tartanator 成为一个超级移动 Web 应用？ 

我们的第一个任务是搞清楚需要做什么才能实现 Ewan 在第6章描绘 
的 Tartamitor 。 歌点关注我们还没有完成的黹求，然后把它们汇集 
起来，作为这个阶段的核心 H 标。 



大童农格分圏像 

— 


农袼钾育 1 年 e 


巧衣珞开 


这个内容还戎 t 
嘈备烀。_ 




1 ‘松沣巧” 的苺汴事 1. 

I* 撺溥红好 J 。 

ruvt 杌庇 帮切 抟巧 
a ■炙尖的事件吗7 


i w / 科好叫 I 




列砷站 n 良蚋令 J 
是十是 夏 
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tartanator 第 2 阶段目标 







k & 。 


(parpen your pencil 
、乂 Solution 


这个项目第2阶段的主要目标实际上可以归为两大核心 目标： 


“事件二 ， I 句 

—如果& W 庇以荔叶方式 
“松 终巧" 放们的囷汴事件勤 
梅烤紅紝 j 。 

—W /• 的乎扛庇好財找巧-^ 
最 X 5 •发 ■* 的事件，马7 ( , 

"内;&，是名 


o 构建一个动态.可搜索的与位置相关的事件页面。 

我们需要关联已有的一个亊件数据源，允许用户查找附近与花格布有关的寧件。这 
说明我们要用到地理定位！ 


|| w 必 

大看衣硌夺@沭 


大 •§ 私袼夺囷你 




0加入代码，使用户能生成他们自己的花格布。 

我们已经建立了原型表单。现在需要落到实处，加入代码，让这个表单能真正起 
作用。我们还需要增强现有表单，让它在更时尚的智能手机上更有用，另外增加一 
些小部件。 
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Frank ： 第-个大需求混合了很多小需求，不是吗？我想把它分成更 
小的代码块会有帮助。 

Jim ： 先别管这个，现在想想“关于我们”页面和历史背景的那些内 
容怎么办？ 

Frank : 噢，对 f ! 为 Tartans Unlimited 整理自传和信息的那个人刚 
做 f 爸爸。他发现比原来预想的要忙多了，他暂时分身乏术，没办 
法来帮忙。也算是个惊疼，是吧？所以我们现在先不用考虑这个问 
题。 

Jim : 嗯，我想这样可以少一件事。下面来讨论怎么加入代码，允许 
用户创建他们自己的花格布图案。不是在吹牛，我在这方面已经做 
了一些工作。我一直在写 JavaScript 来改进表单。 


Joe ： 确实很酷。 ft 起来很漂亮。不过我们还需要加人服务器端脚本 
来做 R 体的 I ：作。 


Jim ： 你们这些人吶，张口闭口都是服务器端！相信我，增强表单界 
向绝对是个显荇的改进。 


Joe ： 不过要知道，我一直在编写 PHP 脚本。那些事件呢？ 

Jim ： 实际上，我们是不是可以先電点考虑花格布生成，等以后感觉 
做好准备 T 再考虑事件搜索，那时再 N 过头来研究这个问题，怎么 
样？我头脑有限，一次只能考虑 •个 问题。 

Frank ： 我想，只要能快点让用户创作花格布就行。我们的时间很 
紧。 


任务 列表： 定制用户芘格布®索实现 

的身列表. 


戏門以 jit 孖诒， 

□ 增强我们之前构违的表单，充分利用新型移动浏览器的功能。 


□ 加入服务器端代码来处理表单，并生成用户自创花格布的相关资源 
(图像、 HTML 等）。 

□ 确保应用这一部分的离线体验能让人接受。 
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漯亮的增强 


咅就咅位，预备，増强 .r 

做好准备！稍后我们就要对 Tartanator 的创作表单做很多漂亮的 
增强处理。 



Tartan Builder 

• 办 wrtuxr 和， 

• Tmtuiytnc 


t 踔. （ i 个表輩也钱王當 
io . i —龙垠 衿， 


我们已经设计了一个表单，可以提供最基本 
的用户 体验： 我们不会冷落任何人（嗯，也 
许极少数人除外）。你可以在一个根本不支持 
JavaScript 的浏览器 上加栽 Tartanator 创作表单， 
看看会发生什么。 


Tananlnfo 

Cotar 


这个表单对所有人都适用，不过另一方面 i 并 
在所有人看来它都很丑陋，也很怪异。对于一 
个功能不太全面的浏览器，有6个颜色-大小组合 
域尚能接受，但是对千功能更强的浏览器来说， 
这就很是累赘了。 




既然 我们已 经满足了基本需求，下面来做-些 
增强处理，让表单在智能手机上使用时成为一 
种？受。 


不要一听说编写你自己的部件就 
惊惶失描。我们已经为你提供了 
相应的 JavaScript 。 

，-流的高级开发人员已经为你 
写好了这个增强 JavaScript 。 对于移动 Web 应用项目， 
他们总是热情高涨，工作完成得又快又好！ 

我们会带你了解其中的說点内容（你也可以花•些 
时间研究这些代码），不过你不需要 fid 动手写任 
何代码! 


\ 你 1 狀 
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建交一个更梯的表单 


这6个域挤在一起很不美观，而且功 
能有限，所以现在不再用这6个域, 
我们只使用一个部件。这样一来，用 
户可以随心所欲地增加更多的颜色-大 
小组合域！为此，除 r 第一组外，可 
以使用 JavaScript 删除所有其他的颜 
色-大小域。 

定制顏 色迭烽 域鄯件 

我们可以覆盖浏览器中的默认选择界 


o 它一迷 狭丞 <•) .铋 5 F 7 I 公个 



面，使用 jQuery Mobile 的一个定制选 
择 U 1 部件。这样一来，还可以为每个 
选择显示颜色块。 

我们要用的定制 jQuery Mobile 部件将 


White 


Light Gr«y 


I Mpd Cray 
I Dark Grey 


像对话框一样弹出，显示颜色选择。 



Geek Bits 





如果你熟悉 jQuery 代码，可能已经多次见过（或用过） $( document >. ready 构造 ， jQuery 
. ready 方法就类似于浏览器的 body . onload 亊件（但不完全相同），触发这个事件时，会指示 
DOM 已经加载并准备就绪 B jQuery 幵发人员通常会把代码包围在这个亊件中，保证在页面 
DOM 准备好之前不会执行这些代码 # 

在 jQuery Mobile ( jQM ) 中，（通常）不会使 S $( document }. ready 。 实 际上， jQM 引入了一些 
新的与页面加载相关的亊件，其中最重要的是 pageinit 和 pagecreate 。 jQuery 和 jQM 完成页 
面 DOM 初始化之后但在显示部件之前会触发 pagecreate 。 在部件完成之后则会触发 pageinit 。 綷鉍烀， 

要记住，后续页面通常会插入第一个页面现有的 DOM 中，这说明在一个完整的页面加载中 方釦扣 d 遣筹方 
pagecreate 和 pageinit 亊件可以触发多次❶ 入 "5 耷棉鉍 

是不是不明白？反正我们有点糊涂了.即使是资深的 JavaScript 和 jQuery 专家掌握这个概念 ^ ^ ^ f 4 

也要花一些时间。有关的更多内容可以参考 JQM 文档 （ http :// jquerymobile . com / demos ) 。 
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颜色和大小部件 


一个部件管理颜色大小列表 


除了一个颜色-大小组合域外，我们已经删除了所有其他组合域。利用剩 
F 的这个颜色大小域对，我们需要能够生成任意数黾的颜色•人小组合域。 

为此，我们增加了 •个新 按钮 ： “Add This Color " (增加这个颜色） • 
争击时，当前选择的颜色和针数会作为一个列表元素 （< li >) 增加到一 
个无序列表中 （< nl >) ,这个无序列表包含当前的所有颜色-大小值。我 
们还要为 < H > 增加隐藏的表单域来包含颜色和大小。 

单击现有颜色列表中的一个 < li >, 会将它及其内容从列表中刪除。最后， 
单击 “Make it !” 提交按钮会生成一个花格布图案，其中包含列表中当前 
的所有颜色_大小。 




用户荦紊 "Add Thus Color 
(缯加 (i 个軾达> 抬往的 杨 
•也 <•) .说含 峨含坩扣料办 
表中. 


狭运表 


JavaScript 宅绒 



M . t # C 0 l 0 VrilSt 


动手试一试 -- - ——^ 

增强的 build.php 表单（详细) 
嘿，好消息。你不需要做任何亊情就能得 
到这些前端增强效果。所有工作都已经帮 
你完成了。 

可以把 chap ter 7 文件夹中的代码作为 
起点，其中已经包含这些 JavaScript 
增强实现。可以试试看！ 

看看在一个移动浏览器中表现如何。 


送綠 糾表 的於 I 柏邑含味各酧泫 


辁入硪 的#辁変的. 
由一个&漱 Si 保糾敖 •&- 
个译辁. 


T - 


掌违沢 表中 3耷 
的珀食均它刪抉 


这个 表輩的拢交趑法- 


表鞏存 wlu * 屮呻否兩 


另外塞: ii . ** 矣联 •. 后 叇炊茲 

輦击这个祛交#往吋何2也不袅总'主！ 


i 士分糾表坩加5 —个摘 
兔 丈 •). 通含铽时. vi 个 
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深度探秘 

我们承诺过，不需要你写任何 JavaScript 代码，不过可以人致了 
解究竟是怎样做的，这可能对你有好处。 

在底层，包含表单的贞面完全加栽到 DOM 时 （ pagecreate 事 
件〉 会发生很多事情，另外在 jQuery Mobile 部件完成增强之后 
( pageinit 事件）也会发生很多亊情。 

在这些初始化函数中，会把其他函数关联到不同事件（表单域改 
变、点击、表申.提交等），来增强用户交互，使我们的定制部分 
真正起作用。 


r 


伞 

动手做 I 


熟悉这些代码。花几分钟仔细 
看看，了解 Tartanator 应用中哪 
些部分有更新，尤其是更新的 
tartanator . js 脚本。 


♦ ♦ 9 . 

畚 

把 JavaScript 增强代码 ( tartanator . js ) 中的各个函数与相应的作用连线，另外还要连接 
触发这个函数的亊件。可以参考脚本中的注释，同时利用你的直觉，确定各个函数 
究竞为我们做什么。 

爯扣一个祧战？ 


函数名 

作用 

触发事件 

PnStltcfiSlzeCfiAngeO 

刷新 3 前颜色列表的< 111 >和< 11 >元素。 

pageinit 和 change (颜色 
选择域） 


构造按钮来增加一个颜色•大小组合域， 
并将它插人到 DOM 中。 

click ( “Add This 

Color ” 按钮） 

l > u1IdAJc®uttPnO 

将选择部件的背景色设置为当前选择 
的颜色。 

pageinit 

pnColwLlstCJjangeO 

构造隐藏的表单域，将它们放在一个 
新 < li > 中，并把这个 < li > 追加到现有的 
颜色列表中。 

click (当前颜色列表中的 
列表元素），新颜色增加 
到列表之后 

JuldOlpfO 

在各个颜色选择项左边增加一个彩色 

CSS 边框 （ swatch ) 0 

change (大小输入值有 
更新） 

? ie ( C^JpvSelectStyIeO 

确保大小值是一个偶整数。 

pagecreate 
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练习答案 

迖就是前纗缯强…… 

[7 f 增强我们之前构建的表单，充分利用新型移动浏览器的功能。宅成… 

□ 加入服务器端代码来处理表申.，并生成用户自创花格布的相关资源 

(图像 、 HTML 等）。 ^一^^下一孕， 

□ 确保应用这一部分的离线体验能 Ik 人接受。 



函数名 


触发事件 




atyleCpIpfListiteiriO 




pnC^i^rListCliangeO - 


jicMCpI^'O 


刷新当前颜色列表的<|11>和<11>元素 。、 

构造按钮来 增加一 个颜色•大小组合域， 
并将它插入到 DOM 中。 ^ 

将选择部件的背景色设置为当前选择/ 
的颜色。 J 

构造隐藏的表单域，将它们放在一个 
新 < li > 中，并把这个 < li > 追加到现有的 
颜色列表中。 

在各个颜色选择项左边增加一个彩色/ 
CSS 边框 （ swatch ) 。 


, pageinit 和 change (颜色 
选择域） 

click ( “Add This 
’ Color ” 按钮） 

广 pageinit 

click (当前颜色列表中的 
< 列表元素），新颜色增加 
到列表之后 

change (大小输入值有 
更新） 


setC°lwSe]ectSt/leO 


确保大小值是一个偶整数。 


"pagecreate 
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界面增强闪亮登场 

本周 访谈： 

增强： 都只是装饰吗？ 


Head First ： 好吧，我得问问了.我们刚刚完成了 
—大堆 jQuery Mobile 特定的 JavaScript 界面增强。 
这真的有必要吗？ 

界面 增强： 简单的说，关于增强移动界面 ， jQuery 
Mobile 的工作确实很抢眼，这是当然的，不过我懂 
你的意思。实际上，这里我要展示一个更宽泛的槪 
念。 

Head First ： 你要说什么？ 

增强： 不论你是否使用一个框架，都可以先设计一 
个基准，然后在这个基准之上增强，这是一个很好 
的策略。 


经建立了一个功能有限的表单，而且比较丑陋，接 
下来可以为有条件的用户改进这个表单。 

Head First ： 你已经覆盖了一个原生表单元素的 
显示。现在颜色选择域会使用一个定制的 jQuery 
Mobile 部件。是这种改进吗？ 

增强： 改变原生表单控件确实有点遭人诟病。我不 
建议把这作为一般经验。不过，对于这个特定的情 
况，为了向用户提供视觉提示（颜色 块）， 利用传 
统的选择域根本没办法提供我们需要的样式。 

底层标记 （< seU C t > 元素）在语义上仍然是合适 
的，不过我们要调整这个元素，让它更有用。当 


Head Rrst : 利用 JavaScript 吗？ 


然，你说的也没错，关于原生表单控件的覆盖，我 
们确实应该仔细考虑。 



增强： 你可以想得更远一些……这比 JavaScript 更 
宽泛。我们要强调 的是： 先从基本开始，定义核心 
的体验或内容，然后再根据情况进行改进，让它更 
出色，也就是说，宂分利用更强大的移动浏览器的 
功能。 
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新一代花格布 


……现在来看后端 

第7茕作为起点的代码有以下结构。要插人这些后端代码，只需要很简 
单的几步。 

把 exlras / scripts 目录的所有内容复制到你的 chapter 7 R 录。完成 
后， chapter 7 目录应该有3个新 文件： config . php 、 generate . php 和 image . 
php , 另外还有一个 incR 录（其中包含两个文件）。 


m 

chapter 7 







generate , php image.php 




config.php 


inc 


-i 

build.php 


花柃冻生谀乏銪 


—m 

css 

—麵 I 

dialogs 



表单提交数据 


一議 

extras 

一 a 

findeventphp 

一 a 

index , php 

is 

一_ 

tartans 

L 議 

tartans.php 


泫用认 表#级之的數 

n 

generate.php 



謹 4 

^ XML 文件 ( HTML 文件 

* 南 ta rta 祕 / data / 餘达 _ tarta * ^中 含釗 it - 个芘格 4 
个 x / vu _ i 4 

这个 

% A , 



PNGi 


於一个 T>N4 i 碑 n 
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gewerate.php^ 两方面 

在创建花格布资源之后， generate . php 最终如何响应，这取决于 
如何对它做出请求。 

便用 Ajax 请求 

对于能正确支持 Ajax 的浏览器， build . php 中的 JavaScript 会使 
用 XHR ( XMLHttpRequest ) 把表单数据提交到 generate . php 。 如 
果成功， generate . php 会响应返回新创建的花格布 HTML 文件的 
URL 。 这个新页面的内容再插人到当前页而的 DOM 。 


览芻是否有 

我伯勒要拔 
併支持。 


圍 

build.php 


用 XHR 异步请求 


提交数据 


用 XK ^ ■珥令磺求 




新花格布 
HTML URL 


••**••••• 琴 


?■ 議 

generate.php 


< new - tartan >. html 


在这个方 法中. 沒有重扣加 
戤繫个否綦扣在埒4灸乇 
的内容者搞入 f *) 釗作否石的 
I>OM 中 .. 


表单蛊捿揸交 

对干不支持 JavaScript 和 XHR 的浏览器，表单会以一种•■传统” 
方式直接提交到 generate . php 。 generate . php 创建花格布资源之 
后，浏览器会重定向到新构造的花格布页面。 


( i 系砷方法中. 0^ £rnt6 - 
的主*工作 I - 1 羊的 
郝 金舍) 澧扣尨格年资进 c 



build.php 


“传统”方法一重定向到新花格布页面 


提交数据 K 重定向 

- ►圍 —— 

generate.php 


+議 

< new - tartan>.html 


在这个方法中. 
载繫个两 $；) c 


書>含重安 
而 (乘«加 
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花格布列表 


最后一个问涯 f 

既然用户可以增加花格布， tartans.php 上显示的花格布列表就有可能一 
直在变。把下面这行代码放在 tartans.php 文件中，来包含一个脚本，它会 
为当前现有的各个花格布分别输出一个 <li>。 

+动手做 I 


动手创建一些花格布！使用 build . php 上的表单创 
建你自己的5、6个花格布。 

你的创作会显示在花格布登录页面上 （ tartans , 
php ) , 



<ul data-role="listview" data-filter= n true H > 
<?php include('inc/list.php'); ?> 

</ul> 



hp 


tfieret^re n9 

Dumb Questipns 


P 5 ): 快来帮忙！出问题了！ 

如果花格布创作表单不能正常工作，或者没有看 
到你创作的花格布，可以检查以下几方面。 

首先，确保 tartans / 目录存在，而且这个目录及其所有 
子目录对你的 web 服务器的用户都可写，另外，检查 
tartans 目录中的 tartan - template . php 文件。最后，反 JL 
检查 build . php 中 < form ># 记的动作和方法是否正碑， 

1^) ^花格布列表页面是怎样工作的？ 

:这个页面中包含的 Ust . php 文件会査看 tartans / 目录 
中的当前 HTML 文件来生成列表。对于每个 HTML 文 
件，它会获取相关的 XML 文件 （ tartans / data / 中）来得 
到更多佶息，如漂亮的显示名。然后对每个花格布分 
别榆出一个 < li >, 并输出一个链接指向这个花格布的 
HTML 页面。 


相关的 XML , 这到底是什么？ 

我们把花格布图案的数据表示存储为 XML , 这有 
几方面的原因。首先，这是 一个阃 单的、可移植的格 
式。其次，这样你就不需要使用数据库了（可以少做 
很多工作〉. 

r 顺便问一句，你说的这个超级移动 Web 应用到 
底是什么？标准？还是首创？或者是其他什么东西？ 

不，我们只是这样称呼充分利用了移动设备及其 
洌 充器强 大功能的移动 Web 应用 # 
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我们已经向超级移动 web 应用迈出了几大步。现在已经增强了 
基本界面，使它能利用更高级浏览器的强大功能。现在该让 
应用具体做点什么了！ 


增强我们之前构建的表单，充分利用新型移动浏览器的功能。 


加入服务器端代码来处理表单，并生成用户自创花格布的相关资源 
(图像. HTML 等）。 


确保应用这一部分的离线体验能让人接受。 


不过还浚冇彻底完成 f 


现在必须完成花格布创作实现的第3 部分： 这些花格布要离线 
可用。 


A 傾人。 我想向朋食展示我几分钟前设计的茌格 
布……不过达个大的线踣惰*供著。我浚办法迻 
鏤……现在我的茌袼布 X 示不 


对于移动设备，无法保证有一个稳定的 
网络连接（甚至不能保证网络连接的存 
在 ）* 


我们要采取一些措施，使得没有互联网 
连接时花格布也可用。 
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离线存储 


离线很重要 

要提供让人满意的用户体验，其中很重要的一方面就是要 
让你的网站和应用在没有互联网连接时也有很好的表现。 

对干 Tartanator , 我们需要后退一步，确定对干没有连接的 
用户如何更好地完成工作。我们要确保某些内容离线可用。 




我们可以使用一个缓存清单 （cache manifest ) 来定义应用的哪些部 
分要离线可用。 

建立漼单 

应用缓存 (Application cache ) 是 HTML 5 规范中引入的一种缓存机制。通 
过使用一个缓存清单，可以控制哪些 Web 资源要缓存，从而能离线可用。 

缓存清单是 Web 服务器上一种特殊类型的文件，指示某些 web 资源是否要 
在用户设备 t 缓存，或者如 H 缓存。通过创逮一个缓存淸单，我们可以指 
示 Tartanator Web 应用中哪些方面要离线可用。 

实现应用缓存（或 appCache , 通常都这样 简写） 的浏览器还提供了 
window . applicationCache 对象及其各个事件，我们可以根据需要利用 
JavaScript 来访问和处理。 


appCache 在当前浏览器中已经得到相当广泛的支持，不过有几个比较突出 
的例外情况 ： Internet Explorer 9和 Opera Mini 。 对干这些浏览器，使用缓 
存清单不会导致出问题，但这些浏览器不会注意到缓存。 


， V. 霣货办冑料 _ 

很难让 Opera Mini 支持应用缓存，你能想到这是 
为什么吗？ 
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劍建鍰存清单的圣本步骒 

要在一个网站或应用上创建和使用缓存洁争，一般有3个步骤。 


0 编写一个缓存清单文件。 

O 为支持缓存的页面的 < html > 标记增加一个 manifest 属性，并指定一个 

URL (也可以是相对 URL ) ,指向之前创建的清单文件. 

_ i 个 i 碑的 场 4 

o 确保提供的清单有正确的文件类型。^ 〆 r ^ t / c « cn c s 时不裢王 

d 

缓存请单的简单语法，不过迖是假象 


一个简单的缓存清单文件外表看起来相当基本。 SJ 以把想要缓存的项列在 


CACHE : 标题 F 面（理论上不需要，不过这确实是一个很好的实践 做法） 

0 


的（釦 ( if 的柘 
时 kiu -) • 也可 
w 運逆吋的（如 


CACHE MANIFEST 
# comments look like this 
CACHE : 

index.html 
foo/bar.html 
baz.htmi 
css/styles.css 
icons/plus.png 


m 


ci 个 太碑沒 茫必鬌 u 洱贪 
名巧 wtfl»«u.fcst ,不 Cl 奸羲 
名必 钟盎 oppc . ac ' kie .. 


manifest.appcache 


O 


接 F 来，吏新 Web 页面，增加一个 manifest 属性指 
向这个清单文件。还要确保文件有正确的 Content - 
type (即 MIME 类型）。对十 Apache , 通常只需要 
向 Apache 配置文件增加这行代码，或者更常用的方 


<! DOCTYPE html> 

<html manife8ts"manifest.appcache ,> > 

<head> 


法是向网站的文件系统增加一个 . huccess 文件。 


代硌苦辦 web 菔务 g . S 袼供#果名 



达个 i 哼必琦扈 ( i # 走生 


.htaccess 
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缓存我吧 


遗傯的是，细节会出问越 

理论上讲，使用缓存清单文件的缓存管理很简单。只要列出希望离线 
可用的项，再为页面的增加厲件，缓存就开始了！ 

先別急，要知道，创逮一个缓存清单并让它按我们希望的方式工作, 
可能有些让人糊涂，有时甚至还很烦人。有很多细节问题可能会找你 
的麻烦。如果能有一些好工具来帮助检査和调试到底发生了什么，这 
会很有好处。 

孖崖工爯来帮仕 


WebKit 提供了一个名为 Web Inspector 的工具， Chrome 和 Safari (基于 
WebKit 的浏览器）都提供了这个工具。在资源 ( Resource ) 标签页中 
可以看到关于 appCache 的详细佶息。 



资•:乐6•蒼否中爹子 

crppCa & loc ©*) ^ ^ ^ ■- 


— ^4 _ 


▼Q Frames 
► O (taitant.php) 

▼} j Databat«i 

▼ 士 Local Storage 

表 localhott 
’ r ■- Seiston Storage 
► .^Cooktcs 

▼ — ApolKation Cache 


Imp :〃 code jqucivcom/joucfY-1.6.4.minjs 
rittD ： //co<lejqjeiY-com^mob«le/1.0rcl/ima9es/ajax-loader png 
Mtp //codc.jqijerv.com/mobileyl Orel/tmaget/Kans- lB-Mack.png 
imp ； /co<l«jquerv com/mobile/l Orel/tnuget/icofl$-It-white png 
Mip //cod* Jq^ery <om/mobMe/1 0rtl/nr*9«i/Konj- 36 Mach.png 
nuo.//«od«.j<jiiery com/mob*le/l 0ftl/«m*9et/Ko«»-36-wh«e png 
imp:；/code jq^cry com/mobilc/1 Orcl/iajefy mob<ie-l Orel rron.c** 
http :Itcodt ]4u«fV Com/mob<lc/l Orcl/i<ikMry.mot><le-1 0»tl.mMijs 
I http: //kocalhosv 818l/git/HrwwChaoter7. chsotcr7 / 
hnp://Mxxlhost >US/9it/HrMWChaot<r7/cha(>tcr7/utrstyici c&s 
tmp//iocalhost8SSB/git/HFWWCh20tw7jchaptcf7/inilcii.php 
http://touiho« aaaS/flHiHfvwchww^ / <h*pte»7/j»/tach*-im<u9*fjt 
Mlp ； ;>oci<ho*! 8888/fl»tyMrvwCh*jrtrf7/tl»apt*r7/ir>aiii»«jt «ppc«the pt-o 
tmp://>ocA(hou.9S8S/Qit/HFVWCh2ptcf7/cliaptcf7/(4nans.pho 


Tyoe 

lnpltdi 

ExplicM 
Exolxk 
EkoOcM 
CxDXtl 
CxpIkn 
Ex pi >c k 
L xpli<il 
Master 
Expiioi 
ExphCN 
CxplKM 


7771 
2 29<l 
2.42U 


4.20U 
46.44KB 
77.20KI 
1 90KI 
S74I 
I 90KI 
2.1IKI 
7981 
2.3SU 


几呼宏 全榷冏 」 



使用缓存清单很容易遇到麻烦。 

缓存清单行为可能很难调试，而且很让人困惑，如果没 
有合适的工具，结构不正确的缓存清单文件将很难査找 
和刪除。建议使用 Chrome 或 Safari 来构建和测试我们的 


辽碡的啊 Cache . 可轱署哼 
氓4苦的麝碲.： 



Tartanato 趨存清单。另外要注意， Internet Explorer 在版本10之前不支持 
appCache , 写这本书时，这个特性还只是处在开发人员预査阶段。 

在转向移动设备之前，可以先在一个桌面浏览器上开发和测试，这会对 
你很有好处，不至千遇到麻烦时着急上火。 
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提供沟容类型正碥的清单 



为 Tartanator 实现一个基本的缓存清单。 


我们知道你能使用 PHP 。 所以，我们会用 PHP 生成缓存 
清单文件，并用一小段代码将这个文件的 content - type 设 
置 为 textycache - manifest 。 


你的托管提供商或本地 Web 服务器很可能会支 
持 . htaccess 文件。不过这一点我们不能保证。 


❶ 

O 


将你的文件命名为 manifest . appcache . php ， 把它放在 chapter 7 目录中。 


在文件最上面增加下面这行代码。 


-秸狁行泛哼中的 PHP 代 



余把 ii 个脚本的齡 出钵粟 
t'ft B t&xt/cn cWe- wca M-ftsit .. 


0 增加一个 CACHE : 部分，在其中列出网站的主要页面以及 JavaScript 和 CSS 文件。 


更新 index . php . build . php 、 tartans . php 和 findevent . phpW < html > 标记，增加一 
个 manifest 厲性。 
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缓存问題 



你创建的 manifest . appcache . php 文件应该与下面类似 B 注意我们还列出了 jQuery 内容分发网 
络 ( CDN ) 的 CSS 和 JavaScript 文件。 


<?php header('Content-type : text/cache-manifest *) , 
CACHE MANIFEST 


哚了 Ci 个站 i ： 资 
逢的相的 URL … 


…;5芍以谖用铯的⑽匕轉矛你想 
遠卩的他硪 X ：的资涑‘ 


CACHE : 
index.php 
build.php 
tartans.php 
findevent.php 
css/styles.css 
js/tartanator.js 

http://code.jquery.com/mobile/1.Orel/jquery.mobile-1.Orel.min.css 
http://code.j que ry.com/j query-1.6.4.min.js 

http://code.jquery.com/mobile/1.Orel/jquery.mobile-1.Orel.min.js 


Tarta^ator^ ® J ： ti^HTML manlfest.appcache.php 

f 杉记现沒硿戌体 d 样， 


<html manifest="manifest.appcache.php*'> 


f 逢用 php 令成涑辈也存存一 个同躲 
^ 我们乇法馑用期望的.印产妒摹名 




我想 我们是 不是再。拟 
多扭係和® 标郝浚布显示 •印 
值我在线它们 坊不五 彔。 
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缳存清簟闪亮登场 

本周访谈： 

让 appCgc # 听我们指挥 


困惑的 Web 开发人员（以下简称 FWD ) : 哎呀 
我在 Tartanator 网站上导航时，一大堆图像、图标 
都没有显示，甚至即使我在线它们都不显示。 

appCache : 嗯，这是因为你忘了把这些资源包 
含在 CACHE 列表中。你应该把它们增加到缓存渚 
单里。 

FWD ： 这么说，我要列出网站上的每一个资源， 
否则它们就根本不会显示，是吗？ 

appCache ： 不是这样。你 R 需要把 HTML 文件需 
要的资源增加到缓存中。 

FWD ： 我完全被你搞糊涂了。那么 HTML 文件放 
在缓存里有什么意义？ 

appCache ： 你已经知道把 HTML 文件包含在应用 
缓存中的一种方法：可以将它显式地列在清单文 
件的 CACHE 部分。不过，还有一点需要说明，只 
要 HTML 文件的 HTML 标记上有 manifest 属性，即 
使没有显式地列在缓存清单中，这些 HTML 文件 
也会包含在缓存中。只有清单中列出的页面或者 
manifest 属性中引用了淸单的页面（即在缓存中的 
页面）需要将其所有资源增加到缓存列表。 

FWD ： OK ， 这么说，对于放在缓存中的所有页 
面，如果我忘记把每一个资源都增加到 CACHE 部 


分，_掉的那些资源就不会加载，即使我在线它 
们也不会加载，是吗？ 

appCache : 嗯，也不完全正确。我想你已经了 
解 CACHE 部分，不过还没听说过 NETWORK 部分 
吧。 

FWD ： 那又是什么？ 

appCache ： NETWORK 部分允许你定义不想缓 
存的资源，对于这些资源，浏览器要在连接可用 
时请求新的资源副本。它有一个让人不太明白的 
特殊通配符 *, 这表示未在 CACHE 中显式 列出的 
所有资源都应当从服务器获取。 

FWD ： 明白了！看来这是我想要的答案。 

appCache ： 别那么草率，当心点。如果一个资 
源列在 NETWORK 部分中，不论是显式列出，还 
是通过 * 通配符指定，都总会请求新副本。所以你 
要仔细地选择路径。 

要确定哪些内容离线可用，把它们列在 CACHE 部 
分。例如，看来你确实需要找出缺少的一些图标 
和图像。不过，对于真正动态的东西，比如登录 
屏幕、 API 调用等，可以让 NETWORK 通配符为 
你楢定。 


你认为 Tartanator Web 应用中哪些部分可能不 
希望离线可用？为什么？ 
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动态输出花格布 



感觉这 ft 个鸡生蛋还 ft 蛋生鸡的问匾，是不 

是？ 


在 chapter 7/ extras 文件夹中找到动态生成 
图像和 HTML 文件列表的 PHP 代码段 # 这些 
代码放在一个名为 current _ filejist . txt 的文 
件中 。 


幸运的是，我们在用 PHP 生成清单文件，所 
以可以加人一些代码来动态输出所有花格布 
HTML 文件和当前已有图像的列表。 



即使清单 CACHE 部分所列的资灝有改变，浏览器也不会 
下教，除非缓存清单文件本身改变。 

iff css / styles . css 放在淸单的 CACHE 部分中„因此，我们可以 
' 编辑 styles . css ， 直到确定最终样式，不过浏览器不会看到 
这些改变。一旦把一个资源放在缓存中，只有当缓存清单文件本身改变 
时它才会刷新。 


要对此进行管理，一种常用的方法是在清单文件中使用一个注释行，指 
定一个版本号。只改变这个版本号，就会让浏览器发现淸单已经改变, 
因此会刷新 F 载，检査其中是否有资源是新的或者有修改。 


我们使用 PHP 代码自动生成当前花格布图像和 HTML 文件列表，这个 
PHP 代码有一个很好的副作用，增加新花格布时会导致清单文件更新。 
不过，实现 appCache 之后，如果我们改变了其他文件，还需要让版本号 
递增。 


5 手做I 


龙记 (i •: 主好 
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我们创建的缓存清单很可能与预想的不同。 

要修正有问题的 appCache ， 在 Chrome 浏览器中最容易办 
到。在 URL 栏键入 chrome :// appcache - intemals , 你会看到 
所有当前 appCache 数据的有关信患。每个网站缓存都对应 
—个简单的 Remove (删除）链接。 


在 Safari 中，进入首选项 ( Preferences ). 选择隐私 （ Privacy ) 标签页。可以 
通过 "Remove All Website Data " 删除所有网站数据，或者使用 “ Details ” 按 
钮搜索有问题的网站，并删除其缓存 

在 Firefox 中，进入首选项 ( Preferences ) —高级 (Advanced ) —网络 
( Network ). 在离线存储 (Offline Storage ) 部分有一个域，其中列出了已经 
存储数据可以离线使用的所有网站。可以在这里选择性地删除 appCache 。 


现在让缓存清单表现得更好一些。下面把我们学到的一些知识集成到 
manifest . appcache.php 文件中。 


0找出缺少的静态图标和图像。 


jQuery Mobile 使用的一些图标和图像需要增加到 CACHE 部 
分. 


如蓽 3 d 在 C 箾的蟥秣中 
黾现砝 f ® 籽和 ® 
漳.邛杖太41 * 


Q 增加 NETWORK : 和通配符. 

把这个代码放在 CACHE : 部分上面。 


NETWORK:! 


0 增加 PHP 代码段。 

把 extras/current_filejist.txt 中的代码增加到缓存清单文件的最 
后. 

Q 从 清单中蒯除 build.php 和 fmdevent.php 8 的>杉记利释 

好好想一想，这些是只有用户在线时才可用的资源。 “寧 , 

件”页面还什么都没有做，不过很快就会有功能了！ 
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manifest.appcache.php 现在应该是这样。 




<?php header(M 
CACHE MANIFEST 


Content-type : text/cache-manifest'); 

MANtFesTf*? (?) -；i ^ <4 ^ B o 


CACHE : 

http://code.jquery.eom/mobile/l.Orel/jquery.mobile-1.Orel.min.css 
http://code.jquery.com/jquery-l.6.4.min.js 

http://code.jquery.com/mobile/1.Orel/jquery.mobile-1.Orel.min.js 
http://code.jquery.com/mobile/1.Orel/images/ajax-loader.png 
http://code.jquery.eom/mobile/l.Orcl/images/icons-18-white.png 
http://code.jquery.eom/mobile/l.Orcl/images/icons-18-black.png 
http://code.jquery.com/mobile/1.Orcl/images/icons-36-white.png 
http://code.jquery.com/mobile/1.Orcl/images/icons-36-black.png 
index.php 
tartans.php 
css/styles.css 

<?php // The PHP code snippet from the current_file_list.txt file 
// goes here. We 're not showing it to save space.?> 


现在，保存这个文件，试试看! 


Watch it! 


缓存清单的一个问 B 可能导致整个缓存无法工作。 

你还 需要了 解更多技巧。不过要知道，如果淸攀中一 
个资源导致404 (未 找到） 错误，整个清单都会被忽 
略。类似地，一个语法错误可能导致整个清单文件失 


效。 


你可以采取一些保护措施。可以使用有些神秘的清单验证工具 
( http :// manifest - validator . com /) ,监视开发工具窗口，确保没有遗 
漏任何引用的资源。 
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更新，不要重新加载 



Frank ： 我仔细研究过了。我承认对这方面很着迷。它是这样工作 
的。假设你的浏览器对于这个网站已经有一个缓存淸单文件。另外 
假设你在创违新花格布之后再次访问这个花格布列表页面。浏览器 
会注意到缓存清单文件 d 经改变，它与浏览器原有的那个文件不同， 
因为其中的花格布文件列表已经改变。所以浏览器会立即获取新的 
清单文件，检査是否有更新或新增的内容。 

Jim ： 那为什么更新或新增的这些内容没有立即显示呢？ 

Frank ： 浏览器显示页面前不会等待更新或新增的所有资源都下栽。 
•旦浏览器完成内容>栽，新增或更新的资源将准备就绪，放在浏 
览器的缓存中，但在页面刷新之前不会显示。 

Jim ： 这么说，要让人们看到吏新的东西，唯一的办法就是重新加 
载。 


Frank : 嗯，对子这种特定情况，我想我们可以采用一种迁回办法。 
我写了 一个小小的 JavaScript 工具。 

Jim ： 又要用 JavaScript ! 

Frank ： 页面中动态的部分是由包含在页面中的 PHP 文件输出的， 
也就是 list . php ^ 它为毎个花格布输出一个 < li >。 页面的其余部分是 
静态的。我们实际 h 只关心更新花格布列表<1!丨>的内容。 

Jim ： 没错。 

Frank ： 我的代码使用了 window.applicationCache 对象和它的方法来 
査看对缓存是否有更新。如果渰单文件有改变就说明有更新，是不 
是？如果有吏新，我们希望从 list.php 得到更新的输出。 

Jim : 对。如果绥存清单有更新，我们就知道花格布列表应该已经 
更新。最好不需要用户重新加载整个页面。 

Frank ： 是啊。所以，如果缓存淸单有更新，我的代码会向 list.php 
发出一个 Ajax 请求。 list.php 不在清单中，直接请求 list.php 时，它总 
会返回表示当前花格布列表的 HTML 标记。然后我用 list.php 返回的 
标记替换页面上当前的（过 时的） 列表。就这么简单！ 
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1 -试- 

下面试试 Frank 的小 JavaScript 库，看看能不能帮我们渡过这个复杂的 appCache 难关。 


Q 找到这个小代码库。 

将 cache-manager.js 从 extras/js 文件夹复制到 chapter7/js 。 

在 Tartanator 页面中包含这个脚本。 

把 cache-manager.js 脚本包含在 index.php 、 build.php. findevent.php 和 
tartans.php 中，放在 jQuery Mobile 脚本后面。 

<script src="js/cache-manager.js" type="text/javascript u X/8cript> 


把这下面的 JavaScript 代码段增加到 tartans.php 。 

这个代码说明我们希望确保 #tartans_page 页面内容 <(^> 中的 #tartans- 
Hst 元素得到新内容，要使用 irK/list.php 返回的数据。 


<div da t a - r o 1 e= M page " id= ,, tartans_page ,, > 

<script type=*' text/javascript" chars«t= ,, utf-8' , > 
var tartanPage = $ (' #tartan«__pago'); 
tartanPage.live (’ pageinit*, function () { 
if (!tartanPage.data.cacheManager) { 

tartanPage.data.cacheManager = new CacheManager('#tartans__page'); 
tartanPage.data.cacheManager.ensureFreshContent('ftart&ns-list', 

’ inc/list.php 1 ); 


>)； 

</script> 

<div data-role="header" data-position="fixed": 


墨」 


tartans.php 
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真正的缓存 


l 15 ) I 既然可以在缓存清单的 
NETWORK 部分使用一个通配符，为 
什么不能在 CACHE 部分使用一个通配 
符来缓存我的网站上的所有内容，那 
不是更简单吗？ 

| :不管怎样，都不能在 CACHE 部 
分中使用通 fc 符。这个特珠的通 K •符 
只能用在 NETWORK 部分中，而且它 
实际上不是一个通 fc 符，不能与其他 
文本糢式 结合。 这是一个往立的东西， 
有特殊的含义（即，对于网站上的一 
个给定资源，除非将它显式地列在另一 
部分，否則都要尽可能通过网络来请 
求这个资 源）. 

即使没有列在清单中， HTML 标 
记中有 manifest 属性的页面也会缓存， 
这有什么意义？ 

这可能确实会带来混乱，让人头 
疼。不过关鍵是，这样一来，不再一 
次性下载和緩存给定网站上的一大堆 
或所有页面，而是可以采用一种 “懒” 
方式将页面增加到緩存，也就是说， 
用户第一次访问页面时，才会把它们 
增加到緩存。 

1^1： “一次性”是什么意思？ 

^ Im t 器得到一个新的或更新的 
緩存清单文件时，它会立即开始下载 
所有新资源并/或检查对现有资源的更 
新。设计你的緩存清单时需要仔相考 
虑这 一点。 


thereiare no 

Dumb Questio 


ns 


r 我们的清单包含所有花格布图所有这些都还好，不过如果用 
像和 HTML 文件。这是不是意味着一户的浏览器不支持 appCache 会怎么样 
次要下载好多的资源？ 呢？ 


对此我们也有点 苦恼. 确实有很 
多的 HTTP 请求，这一点没错。不过这 
姿文件都很小，大多数图像都不超过 
1 KB . HTML 丈件甚至更小。所以，带 
宽影嗍很小，另卟，由于这些资源是 
异步下栽的，所以对用户的影响应该 
微乎其擻。 

R 1每次清单更新时浏览器都要重 
新下载清单中的所有资 源吗？ 

¥:谢天谢地，不会的。洌見 S 会查 
看它已经緩存的资源是否有改变，但 
是除非确实有修改，否則不会再次下 

我。 


网站的表现会像我们增加緩存清 
单之前那样。它还能正常工作，不过 
不会提供漂亮的离线体验。 

:你完全没有提到 FALLBACK 部 
分。 

令 I 除了 CACHE 和 NETWORK 部分, 
还有一个可选的 FALLBACK 部分，可 
以在这里列出在线版本不可用时要 
使用的离线版本一例如，使用 offline , 
html 而不是 login . html . 

问： appCache 很不错，不过 
localStorage 呢？ 感觉你只说了一半。 

¥:嘿，你真聪明！你已经超越 
我们了。第8幸我们还会回来讨论 
localStorage (如果你没有听说过这个 
词，也不用担 心）. 



当心通过 manifest 厲性实现的隐式 
缓存 a 

之前我们已经提到过，不过这里再强 
调 一下： < html ># 记上有 manifest 属 


性的页面都会缓存，而不论这个页面是否显式地 
列在缓存清学-中。噢，对了，即使借助 NETWORK 


部分或者试图采用任何其他技巧也无法绕 


过一点 D 
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胜利（最终）厲子我们 

哈，真是一场浩大的战斗，不过现在终干能让 Tartanator 离线工作了》这说明我们 
已经实现了第2阶段的定制花格布部分。 

[Tf 增强我们之前构建的表单，充分利 用新型 移动浏览器的功能。 


[7f 加入服务器端代码来处理表单，并生成用户自创花格布的相关资源 
(图 像， HTML 等）。 

[Ff 确保应用这一部分的离线体验能让人掊 
受。 


实现&揸索的事件 



祺贺你，你巳经成功 
3 appCache „ 


编写缓存清单文件，让它按你希望的 
去做，这可能很难，不过你做到 n 


第2阶段的另一部分是要构违一个页面， it 用户 
搜索当地附近与花格布有关的事件。 
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要知道，不只是 GPS 


地理定位如何工作 


从 Web 浏览器实现地理定位需要使用 JavaScript 得到设备的当 
前位置。很多现代智能手机浏览器都实现了 World Wide Web 
Consortium ( W 3 C ) 地理定位 API , 它提供了一个简单的接口 
来得到地理定位数据。在这个领域还有另外一些竞争者，包括 
如今已经过气的 Google Gears API , 以及•些专用 API 。 较老的 
手机（甚至一些现代智能 手机） 可能根本不提供浏览器中的地 
理定位支持。 



听到地理定位时，很多人第一个想到的就是 GPS 
(全球定位系统 ， Global Positioning System ) ，不 
过实际上要得到一个设备的位置，还有很多其他 
信息来源，包括附近的 WiFi 网络、蜂窝信号塔、 
设备的 IP 地址 、 RFID (射颊识別 ， radio frequency 


((»)) 


蜂窝倌号塔 


ol 


琶 a 




24.21.168.0 

设备的 _ p 地址 



RFID 标记 



00 :0D: 93:00:00:00 

MAC 船止 


identification ) 标记，以及 WiFi 或蓝牙 MAC (媒体 


访问控制器）地址。 
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如何尚符含 WJC 标准的洌览器询问当 
前伎 I 

实现了 W 3 C 地理定位 API 的浏览器可以通过 navigator.geolocation 
对象提供地理定位。这个对象最重要的方法是 getCurrentPosition ， 
颐名思义，它的作用就是提供当前位置。 


I 


珥 f*) 设 & 的 • 去前 fd.E 


nav ^ ato ^^ eoloca ^^ r ^ getCurrentPosition ( successCa ^^ acJ ^^ errorCal ^ aclc ^^ J | 


格？ 一个圬 8 的瓣意渴用的 javascript 


JavaSoft 也 ft 的函教名 


处理 getCurrentPosition 返 ©的 信患 

成功地确定一个位置时，将调用所指定的成功回调函数，并为该 
函数提供一个 position 对象。我们会得到真正关心的信息，经度和 
讳度，可以査看 position 对象 coordsW 性的 latitude 和 longitude 来得 
到。 

或柄故 /裁们"的传‘ 


po & iti - o ^ i & 重 暑的尿 
■ft -8. coords 对象 . 


function successCallback (position) { I 

var coords = position.coords; 
alert(coords.latitude + ' f 1 + 

coords.longitude); 

f \ 

•_ - _ 1 


. coordsri^it f 的 f fit 則 ■tUtCUc^ 和 

U > >^0 itu.de 

痄 #® 如莓出 5 问 
€杖古设用这个 * 裝 . 


vi 系个 A 教 P .含殚出一 
^javascript 罾爸裡（奄 


function errorCallback(error) { 
alert(error.message); 
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代码定位 



地球袁位 JavaScript 磁贴 

把代码磁貼放在下面地理定位 JavaScript 中正确的位置。每个磁貼 
只能使用一次，不过可能有些磁貼根本用不到。 
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t 找事件页面 起步： 基准 

査找事件 （Find Events ) 页面的想法很明确，就是要査找事件。现在先 
看看如何在可用的浏览器中使用 JavaScript 査找用户的位置。不过我们还 
是采用先创建基准体验的做法。如果一个用户的浏览器不支持 JavaScript 
或地理定位呢？ 


下面先从基本的开始，创建一个事件搜索表单，这里不需要 JavaScript 或 
地理定位。在一个选择列表中提供美国各州的一个简单列表，这就是我 


们的默认基准。 


一个 K 常阑#的表辈. 芍以 祐州 




在 findevem.php 上建立一个简单的事件捜索表单作为我们的基准。把表 
单放在页面内容<€^>中£ 

梢后妖含杳讷你存娜 

为这个表单指定一个 GET 方法，另外 id 为 search_form。 将 action^ 

属性设置为 events.php。 

分 C 录中舛 f 0 

增加- fselect 输人元素，要显示美国 5G 个州的名字作为选项 这个 太碑 ㈣ 
这些值应当是各个州的两字母邮政编写。 ' 


0 提交输入按钮 id 应为 search _ submit 。 


不#忘记龙泛哆蛾笆®存一个 <div> 中 
M ^ta-roie ififLeLdco^ai^ (jG2M 方式） 
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我知道你从哪里来 



地琪定偉 JavaScW〆 磁贴考案 

这些磁贴的位置放对了吗？ 


function getLocation () { 

// Verify the browser supports W3C geolocation 
if 


navigator.geolocation 匯） 


navigator.geolocation. 
else { II It doesn’t 
onGeoError(new Error( 


gotCurrentPoaition 


"Browser doesn't support geolocation 1 


|^®^G«oSuccea^j , 


onGeoError); 


function onGeoSuccess 


coordinates 


> 


alert(coordinates. 


s position i) 

I position fcSord 

[^ atitudeT ^ ,, • + 


coords; 

coordinates. 


^ongitude ^)； 


function 


onGeoError |( error) 


alert(error. 


^oes^sagejj) 


getLocation ■()； 


构造这个代码之后，把它放在一个名为 geolocation . js 的文 
件中，这个文件在 chapter 7/ js / 目录中。然后在 findevent . 
php 页面上包含这个文件，为此要在 data - role = " page " 的 
< div > 中使用一个 < script > 标记。 


这右技故杏禮索表鞏 i * 赉 


/ 




coords ft P° 


getCurrentPosition( 


I position I 
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集成她理定位 



现在我们有了一个基本表单。喚，还有一碑烦人的 JavaScript 
聱告框。 


下面这一部分很有意思，为支持地理定位的浏览器加入地理 
定位功能。完成以下修改之后，对于支持地理定位的浏览器 
会显示类似下面的表单。 _ 


» 


0*221 ^ 

3 • 輪 01* 97304 

Tartan « ^(he2oof 
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地理定位构造 


地理定位构造 

我们要“装扮” geolocation . js 中的代码。下面对其中的重点做详细分析。 

(function () { 

var $page, $searchForm, $submitButton, $stateFilter; 


u 

4 


$page = $(•#event_page'); 
if (!$page.data.initialized) { 

$page.live('pagecreate', initGeo); - - 一 

$page.data.initialized = true; 


否 if w 治 ft 的. ■{霉 用 
&HL. 


function initGeo 0 { 

$searchForm = $( ? #search_form'); 
$submitButton = $('#search_submit 1 ); 
$stateFilter = $('#state_filter'); 
if (navigator.geolocation) { 

initGeoOptions(); - - y 


兵的表 輩犬最 


function initGeoOptions() { 

var $latField, $longField / $flipSwitch; 

$flipSwitch = $ (*<select name= ff usegeo M id= M usegeo" 米知一个•:脅从丹英 尤件 用户任 
data-role= ?, slider M ><option value="off">0ff</ $ 的的 • 去筘仿 S 

offxoption value= M on w >0n</optionx/select>'). 
change(toggleLocation); 

$flipSwitch.prependTo($searchForm).wrap('<div data- 
role= M f ieldcontain'*x/div> *); 

$flipSwitch.before('<label for="usegeo">Use my 
Location:</label >')； ^ «« 加 * 个 8« 域 . 侈 S * 蟪 

$latField = $('<input type= ,, hidden" / >') .attr ({ name fi fiiva/id 

z ’latitude ，， id : ’latitude 1 }) ~ 

$longField * $('<input type="hidden" />').attr({ 
name: * longitude ', id : 1 longitude' }) 

$latField.appendTo($searchForm); 

$longField.appendTo(SsearchForm); 
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1 



to00UU>&atu>Kv^ ■$； f 1 } 
幼并关的 dia *^ e 搴4 . 


function toggleLocation(event) { 

var geoActivated = ($ (event. target) . val () 如菜用户并达勿 含絮用州 
== ' on') ? true : false; iii&B 4 絮用趕交斿往（他 

if (geoActivated) { ^ 〆 理定仿宏硪吋 含曾知 4 用 ） a 

$submitButton.button('disable 1 ); 

$stateFilter.selectmenu(* disable *); 

$.mobile.showPageLoadingMsg(); 

navigator.geolocation.getCurrentPosition ( ^ 存 iif 祐发他 fl 宠 d 

onGeoSuccess, onGeoError); 

} else { 

$stateFilter. selectmenu ( 1 enable 1 ); ^ 一 ^ (f) o-J. t ^ ^ ^ ^ 

$submitButton.button('enable'); 

} 

function onGeoSuccess (position) { - - f' ^ ^ ^ 我们 3 

var coordinates = position.coords; l*' 逢甲用 戶的化 f 炎 

$ ( ， #latitude') .val (coordinates, latitude); 

$ (*#longitude').val(coordinates.longitude) : 

$.mobile.hidePageLoadingMsg(); 

$submitButton.button('enable 1 ); 

} 出现锊戊的•犯■'值用池蠖僉^ 

function onGeoError (error) { c 一 — 的消鉍 ft M ( 脅功利关闭沄赛.钱运 

$ (’ lusegeo*) .val (’off ’ ）.trigger ('change 1 ); 4 (ii 个寧 宠利上 

alert (error.message); 石 的 to 的 leu^atL 州）， 

}) 0 ； 


试试看！进入表单，感觉一下这个新 
JavaScript 会为我们做什么。 


在 chapter 7 文件夹的 extras / js / enhanced _ 
geo _ form . js 中可以找到这个代码。 

更新 geolocation . js 文件，保存，然后尝试 
更新后的“査找亊件”页面。 


J 
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访问库 


Jim ： 我刚才在一些设备 h 检査 f 地理定位部分。我知道 BlackBerry OS 5浏览 
器支持地理定位，但是并没有显示 “Use My Location " (使用我的位罝）开 
关。 


Frank : 对 。 BlackBerry OS 5浏览器确实支持地理定位，不过 它可 不是 W 3 CK 
格。我正在査这个问题。另外较老的 Android 浏览器也没有 W 3 C 风格的地理定 
位。它们都基 f Google Gears 。 


Jim ： 听上去很复杂。 

Frank ： 确实是。另外我们时间很紧。我觉得我们没时间这样一步一步研究每 
一个细节，对一大堆+明确的设备挨个测试。我发现一个开源的 JavaScript 库， 
很方便的，可以在大量不同平台上（不论是 否符合 W 3 C ) 处理地理定位。它的 
名字很简单，就叫做 geo - location - javascript 。 


Jim ： 不过，这是不是意味着我们必须重构现有的所有 JavaScript 代码？ 


Frank ： 不用，这个库的 AFM 模仿了 W 3 C 规范的风格。所有主要方法和属性名 
都是•样的。我们只需要修改几行代码，然后就不用那么担心跨平台兼容性问 
题 r 。 


Jim : 噢，既然谈到对 JavaScript 的编辑……地理定位失败时弹出的错误真是很 
难看，而且最好措辞有点技巧。 


Frank : 对。我想我们应该使用一个 jQuery Mobile 对话框，比如花格布创作表 
单上为表单错误建立的那些对话框。 

Jim : 啊，你还没告诉我呢！ 

Frank ： 如果你想提交一个花格布表单，但是没有指定标题，或者如果在增加 
颜色-大小组合域时忘记/颜色或大小，就会弹出一个对话框， 鳘 告你有错误。 
它会采用一种漂亮的 jQM 样式。 

Jim ： 怎么建立 jQuery Mobile 对话框呢？ 

Frank ： jQuery Mobile 对话框是独立的 jQM 页面。可以査看 dialogs 冃录屮的对 
话框 1 S 面，然后通过 JavaScript 示。 

Jim : 嗯，很酷。我大槪明白了。 

Frank ： OK 。 你一定行的。接下来我要加入这个地理定位库 f 。 





把 extras / js / geo . js 文件复制到 
chapter 7/ js 文件夹。这就是 
geo - locatioivjavascript 库。如 
果你想了解更多，还可以访问 
这个项目的主页 http :// bit . ly / 
sx 7 JrH 。 
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ExesciSe 


更新“查找亊件”页面和地理定位 JavaScript ， 使用这个跨平台地理定位代码，并在一个弹出 
的对话框中显示地理定位错误。 


Q 更新 findevent . php , 包含这个新地理定位库的 JavaScript 。 


<div data-role= M content"' 

〈script src="http://code.google.com/apis/gears/gears 一 init.js" type="text/ 
javascript" charset="utf-8"x/script> 

<script src="js/geo.js M type= w text/javascript" charset="utf-8"></script> 
〈script type="text/javascript" src="js/geolocation.js ,T x/script> 

Q 更新 geolocation . js , 使用这个新库。 

找到并修改以下 代码： 

irf ~ (navigator .geolocation) ~~ f 
— i-rritQeoOptions () ; 


修 改为: 


if (geo_position_jjs. init ()) 
initGeoOptions(); 

} 


并修改以下 代码: 


navigator.geoiacation.getCurrentPosition(onGeoSuccess, ― onGeoError); 


修 改为: 




o 为地理定位错误创建并调用一个对话框。 

依照 dialogs 目录中的其他页面，为地理定位错误创建一个措辞适当的错误对话框。 
把这个文件命名为 geolocation _ error . html 。 

接下来，用这样一个弹出对话框替换 onGeoError 函数中的轚告框。在 js / tartanator.js 
文件中可以找到弹出对话框的例子。应该只需要调整 URL 参数。 
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使用我的位置 




我们提供了一些精巧的 JavaScript 。 

// 我们承认时间很紧张，有些代码还没有做深入的解释。不过 

这不是一本 《Head First JavaScript )) ,我们不希望你分心， 
应该把重点放在当前要解决的主要任务上，也就是要控制住 
pppCache ,并充分利用 PhoneGap 的 mediaCapture API (其至 
包括还不提供支持的浏览器）。 




可以试一试了！下面来看它的实际 使用。 关联搜索代码和示例数据不需要花费太大功夫。 


Q 从 extras / events 目录复制所霈的文件。 

把 event _ search.inc 和 eventjist.inc 复制到 chapter 7 /inc 目录。把 events.php 复制到 
chapter 7 目录。 

Q 试试看！ 

在你选择的移动浏览器中进入“查找事件”页面，点击 “Use My Location” 

(使用我的位置）开关。 
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什么也浚找到 


哈，貞是抱歉。除非你很幸运，刚好在美国俄勒冈州波特兰 
的中心区，否则第一次基于位置搜索时可能都会得到这个结 
果： 



焓 IK ， 靠迫波神竺. ㈣ 你篥 
―汰當技的食得射这个砵羃 


这是因为所有示例数据都是本地的，搜索半径设置为25英 
里。也许该增加一些你自己的虚构事件，让它能提供一些 
具体结果。 



在示例数据中增加一些你自己虚构的亊件。找到 chapter 7/ inc / 中的 eventjist . inc 文件。其中 
有一个很大的 PHP 数组，这就是表示亊件的虚构数据。向这个数组增加你自己的一些元素 
(在你周围25英里范围 内）， 各元素包括一个地址和纬度/经 度对。 

如果你对 PHP 很不熟悉，可以试着直接更新现有数组项的地址和纬度/经度对 • 纬度、经度和 
州就是捜索脚本查找匹配所用的全部信息。 


沒用下面 ci 个 I 爲刁以很孕磚到 f 4 何地价的钵度 〆 没度 
的， http :// itouch _ p . cofK / UitU >% 山 
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为你定位的事件 



更上一 层楼： 你能想到如何增加一个 range 输入域允许 
用户确定搜索半径吗？它应该在什么时候显示？实际上, 
如果你能确定如何 增加一 个名为 radius 的输入域，后台搜 
索脚本已经做好配置，可以使用这个输入域来调整捜索 
半径！ 
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■ 在移动设备上感觉自然舒适的 Web 应用通常 都有一 
些共同的特点，如周全的渐进增强.完善的离线模 
式和位置感知特性。 

■ 从基准开始，这是一种很好的方法，可以支持尽可 


在缓存清单文件中，可以（在 CACHE 部分）指示 
哪些资源要下载并缓存，从而离线可用，另外（在 
NETWORK 部分） 指示哪些资源要在互联网连接可用 
时请求刷新版本。 


能多的用户，然后可以为功能更强的移动浏览器提 ■ 浏览器地理定位在很多现代智能手机中都得到了广 
供周全的渐进增强，得到让人惊艳的效果。 泛支持。很多浏览器实现了 W 3 C 地理定位 AI >! .它 


■ 建立合适的离线体验很 重要： 不能指望移动设备总 
有可用的数据连接。 

■ 我们可以利用浏览器中的 appCache 特性，创建一个 
缓存澝单文件来指示浏览器哪些资源要缓存从而离 


为 JavaScript 提供了 navigator . geolocation 对象。 

对于支持相应特性的浏览器，我们增强了花格布创 
作表单，类似地，还可以增强查找事件表单来集成 
地理定位（如果支持地理定位）。 


线可用。 

■ 缓存清单的构造表面上看很简单，但实际上有很多 
问题需要仔细考虑。 


■ 某些移动浏览器（特别是在比较老的智能手 机上） 
尽管有地理定位实现，但不是 W 3 C 风格。要处理这 
些特殊情况，我们使用了一个第三方地理定位库， 
名为 geo - location - javascript 。 

_ geo - location - javascript 库模拟了 W 3 C API ,只需对 
我们原来的 W 3 C 特定的 JavaScript 代码稍做改动。 
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? 用 Phow 戍 ap 构建湛含型移动 Web 应用 

+ imm ： 实现 M 


哬.蒂刺的锇丝 R 。 

真轉程 .I 采邪 居老爷 爷炙的 不驀兴 
?. #7个达令玩艺几想昉止我傖他 
晚孑1的苹粟。奚是现在布令桥弑 

…… 


有时候你得实现原生。 这可能是因为你需要访问移动浏览器（还）没有提供 
的某些功能。或者，也许是你的客户要求有 App Store 中的一个应用。我们期盼 
着将来能够在浏览器中访问我们想要的一切，希望移动 Web 应用同样拥有那些 
诱人的原生应用才拥有的特性。这种情况下，我们可以选择混合型开发，继续 
使用 Web 标准编写代码，再使用一个库在我们的代码与设备原生能力之间搭建 
桥梁。基于 Web 技术构建的跨平台原生应用？不会是一个糟糕的折中吧，嗯？ 
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花格布之旅 


机会义来：? 


朋在们.注 t ?。 我们 W 控采一个新 霣助. 
资助印栴拳办的苏栲兰大審。我们翥拳行一个贵 
赛.我希望挖它增加到 Tartawator 中 f 



苏格兰航空 Loch Ait •公司刚刚同意资助去爱丁®的 
双人旅行，旅途费用完全由他们承担。 

2个月后即将举办苏格兰庆典博览会，作为这个博览 
会的一部分 ， Loch Air 希望与 Tartans Unlimited (Ewan 
所在的公司）联合举办一次有奖励的竞赛（奖励就是 
爱丁堡的双人旅 行〉。 
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我在想玎认设 it 一种 "技 东甚”祺戏。参赛者 
要在馎踅会贾助葙的》位上椬辱茌 袼布， 捋为 
铯们抆到的抹梏布块拍.租。 


花格布搜寻 （Tartan Hunt ) 竞赛要求参赛者搜寻隐藏在 
某箜重要赞助 商撼位 上的花格布。 

参赛者要努力找到花格布，并用他们设备上的相机为所列的 
各个花格布拍照，找到的花格布再与隐藏的花格布列表核对。 
一旦一个参赛者找到了所有花格布，他就能显示完整的花格 
布列表，嬴得这次旅行。 




很遗憾，这里 有一个 问题。 

对于大多数移动浏览器来说，并+能访问 
相机（以及其他一些设备特性，比如录音、 
文件系统操作、网络状态和通信录数据等 
等 ）o 
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混合型应用 



Frank ： 显然我们没有时间、也没有相应的预算针对多种平 
台将 Tartanator 東写为一个原生应用，并增加 Ewan 希望的新 
特性。 


Jim ： 这是不是说我们没办法完成这个工作了？那可太糟糕 


Jim ： 那又是什么？ 


Joe ： 混合型应用是用 Web 技术编写的原生应用。由于它是原 
生的，所以我们可以得到类似相机等设备能力，不过代码本身 


用标准 Web 编写，所以我们可以在多个平台上共享代码。 


很多珙安鲜力（扣 
匆览粽 坊洵。 







很多坤代 a in 乇泫 以别 枯器# 间。 


Frank ： 不过，既然这是基于 Web 的，那些特性在浏览器中 
不可用，那该怎么办呢？ 

Joe ： 有很多框架和平台可以在 Web 应用和原生代码之间搭 
建桥梁。它们对我们的 Web 应用做一些处理，然后为不同的 
平台提供打包应用（原生应用）。这些框架和平台会帮我们 
处理各种细节问题，这样我们就可以只使用我们知道的 Web 
标准。 

Jim ： 那么，是不是要把整个 Tartanator 转换成这样一个混合 
型应用？ 

Joe ： 我觉得我们没时间把整个应用变成原生应用并有效地进 
行测试。按现在的时间进度要求，能不能只为这次竞赛创建一 
个原生应用，你觉得这个建议怎么样？ 


Frank ： 这个主意不错。这样我们就+用胃着风险急急忙忙 
地修改 Tartanator Web 应用，这有一个好处一参赛者可以下载 
一个只针对这个竞赛的特殊应用。】 oe ， 如果你认为这个混合 
型应用可以在我的平台上使用，下面就跟 Ewan 说一说这个想 
法吧。 
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湛含型应用如何工作? 


可以使用标准 web 技术编 Si 你的代码，如 HTML 5. CSS 和 
JavaScript , 这与我们以前构建 M 站完全相同。然后利用•个框架 
或平台作为桥梁，它会提供•个公 ftAPI , - I 以用它以原生方式访 



昆合型 


个平台生成应用。 


朽孕存 web 代砝如0杉确 


诜的琢 生祜亡二用将 


如轉在科 


anut 




问不同设备平台上的特性。这个框架或平台填补 DavaScript 代码 
和设备原生代码（对十所支持的各个平台）之间的缺 U , 并为各 


杉: flwdo 技木和 

\ 












搭建桥梁 


用 PIiom 淡 ap 垠 #Web- 原生鉍 d 


PhoneGap 足一个开源的 HTML 5 平台，允许你使用我们之前 W 论的混合 
型方法为多个移动操作系统创建原生砬用。你可以按你习惯的方式使用 
HTML 、 CSS 和 JavaScript 编写代码。 PhoneGap 通过一个•致的、跨平台的 
JavaScript API 在你的代码和原生代码之间搭违桥梁。 



PhoneGap 由总部在温哥华的 Nitobi 公司幵发，这家公司于2011年10月被 
Adobe 收购。不过， 不用扭 心， Adobe 已经采取了措施确保 PhoneGap 仍 
然保持开源，它将 PhoneGap 授权给非盈利的 Apache 软件基金会 （Apache 
Software Foundation } 。新创立的 Apache Cordova 项目会确保 PhoneGap 代码 
基-直保持开源。 


Phohe&ap Puild 

PhoneGap Build 是一个基干 Web 的服务，允许你同时为多个平台进行编译 
利用这个服务，可以跳过…些组件的安装，至少是一些 SDK 、 插件、 IDE 以 
及你想要支持的各个平台的某些组件，从而消除构建过程的-些麻烦。 

利用标准 PhoneGap 开发时，你要自己完成编译和构建，而使用 PhoneGap 
Build 则不同，你只需上传一个 zip 文件（或者从一个代码存储库 取得） ，它 


邱 0 %邛蛊辞多 G 矗多7 
个平不 C 2 Ci —筆 衿縫用 
. tF . 

ios. Android, 
Wcbos^j 

Syt ^ biflKv ., 


会完成余下的工作- 
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我们选择 Android 作为示例平台是有原因的 a 

一方面，这是一个流行的平台（确实如 此）。 不过，另外还 
有一个原因，在设备上构建和部署 iOS 应用有一个条件。要 
求必须是 iOS 开发计划的成员（每年的会费是99美元）。我 
们不希望让你多花钱。 

Android 还提供了一个免费的 SDK , 支持在不同版本的 
Android OS 上模拟多种虚拟设备 • 另外 ， Android SDK 在很 
多平台上都能运行。而倘若使用 Xcode (这是 iOS 开发所需 
的开发工具包），則要求必须有 Mac 平台，否則情况可+妙， 


你的孖崖环璜准备好 了码？ 

如果你还没有准备好开发环境，赶快看看附录 以。1 
你需要安装合适的组件，而且要了解如何在虚拟 
和真实设备 t 安装和卸栽应用，然后再来看这一 
章后面的部分。 





JavaScript 先行。 

要完成这一章，并不要求你是一 
it ! 个 JavaScri pt 高手，不过有一点不得不承认， 
如今的 Web 应用开发总少不了 JavaScript 。 


要使用 PhoneGap 与原生功能通信（如相机 API ) ,我们 
需要使用一种客户端技术， JavaScript 显然是完成这个任 
务的最佳选择。 
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混合型问题 


therejwre nQ 

Dumb QuestiQn 


s 


. Hunt 应用 。 PhoneGap Build 其他级别的服务会增加私有应 

M •构建混合型应用还有其他工具.产品或服务吗？ 用和項 目合作 者的个 数。 


当然有，其中有两个最知名的•合«开发工 
具 ： Appcelerator Titanium 和即将推出的 Sencha Touch 2产 
品. 

: PhoneGap 支持哪些平台？ 

• PhoneGap 目前支持 Android ， Bada、BlackBerry % 
iOS 、 Symbian . WebOS 和 Windows Phone 7. 可以查 
看 http :// phonegap . com / about / features ， 其中提供了一 
个列表，列出了哪个平台的哪个版本上支持哪些特性。 


| V ^) :为什么必须安装 Android SDK ? 

I 我们不会编译或构建 Tartan Hunt 应用，这个工作将由 
PhoneGap Build 为你完成。不过我们还需要在一个糢拟器 
或设备（或者这二者）之上完成安装和测试。为此，我们 
需要 SDK 提供的一些工具。 

不过，不需要安装 Eclipse IDE ， 但诀若我们6己开发和构 
建代码往往就需要安装这个 IDE 。 所以至少我们可以少几 
个步驟！ 


问 ； p h oneGap Build 与 PhoneGap 支持同样的平台阶 问：为什么不能直接在獅繼器中访问这些特性呢? 


不完全是。写这本书时 ， PhoneGap Build 还不支持 
Windows Phone 7或 Bada , 

l 1 ^) ^ PhoneGap 免费吗？ 

:是的 。 PhoneGap (也就是现在的 Apache Cordova } 是 
开源而且免费的^ 

'PhoneGap Build 呢？ 它也免费吗？ 

¥:这要看情况 • PhoneGap Build 提供了分級服务。它 
的免费版本允许开发人员有一个私有应用，另外可以有任 
意多个公共应用，我们将使用这个兔费服务来构建 Tartan 


在移动设备上，有些工作不能从洌見器完成，这是有 
一定原因的。 

其中需要考虑的一个因素是安全性。要先许浏見器访问类 
似文件系统或用户通信录之类的特性，这要特别小心，必 
須仔紐考虑如何把它们适当地放在沙箱里，而要想妥善地 
做到这一点是需要花时间的。 

另外，为这痊特性提出的标准可能是新的或者不完备的， 
或者可能有多个版本可以采用，由于这痊问題的存在，可 
以想见我们前进的道路上肯定有坎坷，洌 3 L 器提供的支持 
可能会有冲突或不一致。 

不过，未来总会实现标准化，能够提供各种设备的 API ! 下 
面就来享受我们的旅 枝吧！ 


如果你使用的不是 Android 设备，但确实是 PhoneGap Build 支持的平台之 一, 或者如果你有 
一个 Apple 开发账户，建议你可以试着在你的平台上构建和测试本章中的例子. 

我们的测试组已经在多种版本的 Android 和 iOS 上成功地运行了 Tartan Hunt 应用。 
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PhoneGap:Build 

f *• ilmcKxl • hr' 

S^n t\ 



Take the pain out of compiling mobile 
apps for multiple platforms 




. • - , 7f- eg 

花是费免太费 长的‘且创龍 






应用初探 


应用如何工作？ 

应用的登录页面会显示一个竞赛说明和要査找的一个花格布 
列表。申.击列表中的一项就会 a 示可以在哪个供应商的摊位 
卜.找到这个花格布，并 a 示这个供应商的更多信息。 


i/f a * 



轻击 


用 7_ 个 9 洳 4 的无署 ^ 

fSjazucq Mobil* 中， 4 用 da ta.- ro u* 
作 coUaf^ibLe- 粢贫现 
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在*终完成的应用中，争击“1 found it !" (我 
找到了！）按钮，会启动设备的相机，参赛者 
可以拍下他们找到的花格布。照片将显示在详 
细页面上，另外在登录! S 面的列表屮相应的花 
格布会标记为“已找到” 


Ensuring that your online 
»pp<lc«tton and data it 

to your customers 

*" d *">P»oyw i S kry to 

luccets of 4 ny business. 

pot*mU» network 
• r overl«Mdj «s well 

• fad ov^ pi dn 

«s«nu«l in provtdtni« 
r#5|K»n»iv*. w«Wyi„ g and <n 




punning Int 
Urb4n Planning 


我们已经有了基本 HTML 布局、 CSS 和图像。现在 
要让它们发挥作用，使用 PhoneGap Build 构逮一个 
原生 Android 应用。 


建立并配置一个 PhoneGap Build 项目。打包压 
缩3前的 HTML 、 CSS 和图像。构建应用，并在 
Andmid 设备或模拟器上安装这个应用。 


增加相应功能，允许参赛者标记他们已经找到的 
花格布。 


增加相应功能，允许参赛者保存他们找到的花格 
布的照片。 






应用剖析 


Tartan Hunt 顼目割析 

下面是 index . html 中内容<心>的简化结构。 


内容诘柁 4 一个 
< u . l >. 嵙中在*# 
承多嶔奮 




<div data-role= w content"> 

<div data-role= w collapsible 
<ul id= w vendors H > 

<li> 

<ul class= w details 
<li>...</li> 

<li>...</li> 




.</div> 


个 H 岑的花 44 分 
列 珩一场 (< U >) 


</ul> 

r < li > 

<ul class= n details' 
<li>..,</li> 
<li>...</li> 

</ul> 


</ul> 

</div> 





chapler8 


这个项目中我们又要使用 jQuery Mobile , 所以整体看起来 
与 Tartanator 基本上是一致的。 

我们 B 经 Uthtm 必 ap Puild 做好准备 

作为起点，现在结构基本 h 已经准备好，可以放入 
PhoneGap Build 了。 

PhoneGap Build 项目的结构要基于 W 3 C Web 部件规 
范。 Web 部件是封装的 Web 应用，可以作为独立的客户应^ 

用，如*采用最基本的形式. Web 部件至少包括一个起始 

文件（在这里就是 index . html >和一个 K 置文件 （ XML 文 A ^ , 

www.ws ora/TR/wu<0gts/. 

件） a 可以在包中增加应用所需的任意多个文件，如图 
像， CSS 、 JavaScript 等。 


-圖 

extras 

掘 

images 

議 

index.html 

scripts 

__ 

style 




我们基本上已经准备好了。不过还需要创建•个配1义件， 
为 PhoneGap Build 提供有关应用的-些必要的详细信息。 


PhoneGap Build 会在我们的项目中査找 
一个名为 config . xml 的文件。下面就来建 

立这个文件!_ 
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下面建立我们的第一个 PhoneGapBuild 应用。首先，我们需要一个配置文 
件。在 chapter 8 目录中创建一个名为 config . xml 的文件。使用下面的模板 
完成这个文件的内容。 





, 1 . 0 . 0 "> 


<?xml version =,, l.0" encoding="UTF-8"?> 

<widget xmlns = "http://www.w3.org/ns/widgets" 

xmlns : gap - "http://phonegap.eom/ns/l.0" 

id 

version 
<name></name> 

<description></description> 

<author href="" 

email= ,,M >Y0UR NAME HERE 
</author> 

<icon src="images/touch-icon-iphone4.png" height=’’114" width= M 114 M /> 
</widget> 


-下 $ 1 用⑵从 ‘Ilf 从 W.tflrtaKvhuKvt 
衿残们的 6 用似， 


rtMfiM http：'/'/ 


4iif 钐含,; i 用户 i* 攀 i 

s 糸， 我们 eii 的饬坩加 5 累_个®钤■.芍 以 
■ftiMagtsO * 中# U .)». 拿的®枒.们也加 



config.xml 


要记住 ， PhoneGap Build 应用可以从一个 zip 文件构建，也可以从代码存 
储库获取。我们将采用从 zip 文件构建的方法。 

打包压缩 chapters 目录的整个内容。最后的文件叫什么并不重要，只要 
它 是一个 zip 压缩文件（有一个 . zip 扩展 名）。 
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练习答案 



你的 config . xml 文件应该与下面类似。不过别忘了你的标识！希望你使用自己的名字和内容。 


<?xml version='*l. 0" 

<widget xmlns 

xmlns:gap 
id 

version 
<name>l 


encoding= ，， UTF-8，.？> 

"http://www.w3.org/ns/widgets" 
"http://phonegap.eom/ns/l.0" 

•’ com • hfrnir. tartanhunt" 




Tartan Hunt</name> 

<description>A companion application for the Scottish Celebration : 
win a trip for 2 to Edinburgh from Loch Air! 〈 /description 〉 

〈author href= u http://www.hf-mw.com" 
email= "help@hf-mw.com"> 

Lyza Gardner and Jason Grigsby 

</author> ^ 

<icon src="images/touch-icon-iphone4.png*' height="114 M width= M 114 M /> 

<icon src="images/touch-icon-ipad.png'* height="72" width="72" /> 
<icon arc*"images/touch-icon-iphone.png" height* M 57" width="57” 

<icon src= M images/icon-48.png" height="48" 轉 idth="48" /> 

<icon src=”images/icon-36.png" height= n 36" 

</widget> 


/> 


width= n 36 M /> 
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认讣吓以沒 C 录这碌你 
朽方射 it 的 Z …; t 碎_ 


箄查 Create i 仿 ■ 的应用 - 


登录 PhoneGap Build ， 查看控制面板。现在该创建我们的应用了！ 


•■ rnonuGap ouiia 


Your Apps 


PhoneGap: Getting Started 




Navigation 




Newapp 


create a new git repository 


pull from a git/svn repo url 


enable debugging 
f4 make app private 


Tartan Hunt 


s«(ect upload method 


& upload an archfve or «ndex.html file 
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得到应用 


T 栽应用 

上传 zip 文件之后 ， PhoneGap Build 将你的应用排队，等待构 
建。等一两分钟之后，刷新页面。你会看到对应已成功构 
建这个应用的各个平台分别有一个 Download (下载）按钮。 
我们想下栽 Android 包 ( APK ) 文件。 





OK , 下面就来安装这个 
应用。 


328 第8章 



用 PhoneGap 构建混合型移动 Web 应用 


选择你的路 

在稹权器上安装 

要在一个虚拟设备上安装这个应用，启动 Android 
SDK 。 进入 Tools (工 具） 一 Manage AVDs (管理 AVD > , 
会显示已安装的 Android 虚拟设备 （Android virtual 
Devices , AVD ) 列表。对应•个比较新的 Android 版本 
启动一个设备。安装应用时这个模拟设备必须已经运行。 
除非模拟器已经运行，否则不要试图安装应用。 


k 在炅实设备上安装 

如果你有一个真实的 Android 设备，太好了！把你 
的 Android 设备连接到计算机的 USBn „ 对，就这 
么简单。 


准备.瞄准，孖火 


不论在虚拟设备上还是真实设备上部署，安装应用的过 
程都是一样的。打开一个终端窗口 （ Mac 或 Linux 〉 ，或 
者在 Start (开 始） 菜申-的 Search (搜索）框中键人 
cmd ( Windows ) ,得到一个命令行窗口，再使用 cd 命令切 


换到下栽 Android APK 文件的目录。 


安装应用的命令 如下: 


、 钵法介绍这个令今 1 


adb install 〈包 文件名> 


TR 八 * M•» 


列忘 5 ，这行 Cj 个命今 . 伐 
的 （4 定 ） jj 
机 .戏老必須劣含 4 劫躓扣 》 


的球菜 …… 




$ adb install Tart^anHunt. apk 
1157 KB/s (683431 bytes in 0.576s) 


pkg: /data/local/tn^/TartanHunt.apk 
Success 


逢用 2 . 3 威 

4 .<?+ 的 Avr» s C 柏致条的 
找似器 <5 發闹琺 • 秭利爰沒 
(我们找下瘃 嘈用的） 扣 
机古 9 令车麻飧。 


现在应该能够在设备或模拟器的应用屏幕上 
看到 Tartan Hunt 应用了。启动这个应用！ 

葶•"次这行这个在用的.右妫笱秕 
.象花魚的间一圣多 30 
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E 中 # A 







个 Los，:i 备 土 




个苍名空 




Q 

Tweet Oeck 


It 


TwidroyO 


v 

Va»pak 


: r - 




L M^ ：^OOH 


© 


Q 


■ 

^oke D«»»w 


tScope Gl 


Voice Search 
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t » Uon«»f 1 

C » wJ « J ，v 


-个栈沒备上 S 孑的 
管录否葩.产 sf 扰妁扣金 


O Mow ro ^tmy 


;V*h u *nr 、 T»Mf StotreJ' CHH>r«imn 
ii*»d 0 m? rjnj»» H.mt ^ainel B> 
pM)M 笔 ^A«tan Hu-i \uu uM.id «mi> 

'i day. jM~“pmsri.|AKl ” te« 


n-|#drd t*tej 
itiMty o< lo<i 、 


Ob)«a oi thf |Mnv Wvt r«c»i of Ow 

iponutn hovtr.s bt^ and locor 
•^c %wtjn uratth shown Vault h« 
pt(u*i|ii«4l to take a ^ukJc piioio rt 
«h* ^tun Ot>tt yvuvc 'ourxialt '2 
Urt«rv gi> -o hoo'h C9J0 In H«HStn 
t* r'Hetro ir tti« drAwmglo wirv 


I found it ! 


。作外 O 


O ^ 


Managing potential network 
r server overloads as well as 
having a fall over plan are 
essential In providing a 
esponstve, satisfying «n<f an 
(ways available onllns 
ustomer exp«rlenc«. Call us 
today for a free network 
ealth evaluation. 
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JQuery Mobile 会把嵌套 < u _> 自动转换到单独的“页面”。 

它把各个嵌套列表转换为一 t<div>， 这个 <div>^data-role 为 page, 
点击列表项时会使用这个 <div>f 为活动“页面”。理论上讲实际确 
实只有一个页面。另外可以注意到，父列表元素的标题（在这里就是 
供应商摊位的编号）会作为嵌 g 列表页面的标题。 


嚜，邡么 PlackPerry 嘬 ? 




如果在 PhoneGap Build 上访问控制面板，可能会看到这样的 界面: 



沪（如篥荀的读）. 

杖芍 k/UfilLos 徒& - BlackBerry 的苦脸是怎么回事？嗯，很遗憾，目前 PhoneGap 

Build、BlackBerry 和包含连字符的文件名结合使用时还存在问题。我 


们要用到的很多 jQuery Mobile 文件的文件名中都有连字符。 


表孑沒节 (If <1•友磅 
B-LacteBcrry ^ ^ . 

i ? 搞鴻 ci 个闸兹 ••… 



• •炫费似 ㈣ _ 

为了让 PhoneGap Build Tartan Hunt 应用在 BlackBerry OS 上工作， 
需要调整 jQuery Mobile 的图标文件名，并更新 jQM 源代码中对这 
些图标文件的引用。尽管不会花费太长时间，不过这意味着会 
“改变” jQueryMobile 的内核，带来维护负担。你觉得呢？这样值 
得吗？ 
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卸载并重新安装 



下面增 加一个 幵始屏幕启动画面，这样应用加载时用户就不用总看着一 
个乏味的空屏幕了。使用 PhoneGap Build config . xml 文档（位于 https :// 
build . phonegap . com / docs / config - xml ) 来确定如何做到。 
找到 chapter 8/ extras / images 目录中的两个启动画面图像，把它们移到 
chapter 8 /images 文件夹。 


更新 config . xml , 再压缩 chapter 8, 在 PhoneGap Build 上重新构建这个应 
用，再重新安装，可以看到新的启动画面会起作用。 


我 f«) '*update code" 

在 . i ： 作你的 
丈件.丄•磚 C 后軚含 t 
劫 丹姑曾旃均速过杈 



答*见*« 4 贞。 



Watch it 


完成修改之后，在重新安装之前需要卸教原来的应用。 

每次在 PhoneGap Build 上重新构建应用并且需要在一个设备或模拟器上重新 
安装时，需要首先将它卸载。如果设备通过 USB 与计算机连接，或者模拟器 
(要从这个模拟器中卸载应用）正在运行，此时可以运行这个命令。 



電靂注金.遠 

命今 Ifi 用在用的芭 1 口 

r p ) 这耷令今不 
(3) . LMtaU 命今中 I 迻用 
AT » k * i 件名 


332 第 8 章 










用 PhoneGap 构建混合型移动 Web 应用 


不错，漂亮 f 

根笮你 , W 
I 陴构洚3一个 

不太难，是不是？你可以使用你的 
Web 开发技术构建原生应用，一点都 
不费劲！ 

存倚用户 B 经找到姊些花採布 

[vf 達立并 KW —个 PhoneGap Build 项目.打包压 
缩当前的 HTML、CSS 和 ft! 像，构建应用，并在 
Android 设备或模拟器 .h 安装这个应用。 


太棒 J *。 我们已经有了一个应用。现在让它完 
成它该做的事怙。我们把功能部分分为两步实 
现。 

首先，我们希望应用能够记住用户找到了哪些 
花 格布。 参赛者点 it "I found it !" 按钮时，需 
要应用把它记录下来。 



n 增加相应功能，允许参赛者标记他们己经找 到的* 

花格布。 

□ 增加相应功能，允许参赛者保存他们找到的花格用 子用# 拍授 
布的照片。 




很聿运，在 JavaScript 中可以 


使用一个 HTML5 Web 标准（名 
为 localStorage) 做到这一点。 

PhoneGap Build 支持的所有平台的 
默认移动浏览器中都支持这个标 
准。 



LocciUStrorcige. 不过 
我们 0 稱不方试支辟 



B . U « c . te '& en r y . 
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利用 localStore 保存找到的花格布 


煮到了什么？存储找到的筏格布 


我们可以在客户端存 ftS 简单的数据（在这里就是存储已经找到的花 
格布），而不用那么麻烦去使用浏览器的 localStorageAH 。 

是什么让 localStorage 迖么特殊？ 

过去，开发人员经常依赖于 HTTP cookie 来存储需要在客户端保留 
的数据。不过，使用 cookie 有•些 缺点。 


毎次客户对服务器做出清求时，这个域所有 cookie 的全部内容都会 
传输。有时，开发人员可能想在客户端上存储大最数据，比如图像 
或大1：配1信息，这些用 cookie 存储是不可行的（或者，至少性能 
让人无法接 受）。 


丼 fl 的6用现存旬一个启幼®否 
5 ! vi & 4 -个 iTow - chi ； $ 






另外，使用 JavaScript 处理 cookie 很遭诟病，处理很麻烦，也很笨 
拙。另外，我们希望放在客户端 h 的一呰数据可能根本不需要服务 
器知道（或者，也 iT •就像这里-样，根本没有服务 器）。 

localStorage 专门设计在客户端以键-值对的形式直接存储和获取字 
符串数据。它为我们提供了一些方法来设置、获取和清除数据，仅 
此而巳。一点都不复杂。 



下面是 conflg . xml 文件的最后部分，这里增加了启动画 
面。通过提供两个不同大小的图像，这样在分辨率较 
高的设备上可以显示较大的版本。 



<icon src="images/icon-48.png" height="48” width s=n 48 , ' /> 

<icon src="images/icon-36.png" height=’’36’’ width= n 36" /> 

<gap : splash stc= n images/splash2x. png f, width= M 640 M height='*960" /> 
<gap : splash src= "images/splash.png" width="320" height*"480' 1 /> 

</widget> 


響 


config.xml 
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localStorage 能为我们傲什么？ 


参赛者单击 “I found it !” 按钮时，我们可以为 localStorage 增加 
一项。如果我们想看看参赛者已经找到了哪些花格布，以査看 
localStorage 中的数据。 

认识荻职方法和设8方法 


localStorage 的功能上要由它的两个方法提供。 
以设置一 个值： _ 

用一个僅的龙涔 


t 先，我们可 





锼扣2郝必场4 t 碍莓 


localStorage•setltern(key, value); 


然后，我们可以使用键来访问这 个值: 


蛐苦扣我的左銪痺爷辁鴻的达 ， 

I ； 


var storedValue = localStorage.getltem(key); 


如*的在 ii 个矜利一个啵+ _7 
钤噥谂 storwlvflUte., 



釦蓽沒荀矜 f ‘) 吋在 le ^ 的數 
对. sto « c < vnLuc *§ 亡 wuli , 


在这里，比如说用户在一个供应商的摊位找到了 Douglas 花格布，并 
轻* “I found it !” 按钮指示他找到了，我们可以这 样做： 


localStorage.setltem('douglas ’ ， •true'); 



然后如果我们想査奍他是否已经找到 Douglas 花格布，可以这样询问 
localStorage : 


var isFound = localStorage.getltem( 1 douglas'); 
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磁力注释 



\oca\Siorage 磁贴 

下面更新 scripts / app.js (这个应用的主 JS 代码），记录找到的花格布。更 

新的 app . js 文件在下一页上。你的任务是在相应的代码行上面增加注释磁- >. 

贴。 

每个磁贴只能使用一次，不过最后可 能有一 些磁贴根本用不上！ 
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(function() { 

$ {document}.bind{"mobileinit", function() { 

$.extend($.mobile, { defaultPageTransition : 'none' }); 

$.mobile.page.prototype.options.addBackBtn = true; 

))； 

var initDevice = function() 1 

if (typeof(window.localStorage) == * object *) { 

$('.foundTartan*).click(tartanFound); 
addResetButton(); 

} 

}； 

$(document).ready(initDevice); 
var tartanFound * function(event) { 

var tartanKey = $(event.currentTarget).attr{'id ')； 
localStorage.setltem(tartanKey, 'true'); 

}； 

var addResetButton = function {) { 

var SresetButton = $(*<a></a>').attr(^ata-role 1 ,*button').html('start Over !*)； 
$resetButton.click(function () { 
localStorage.clear(); 

))； 

SresetButton.appendTo($('#booths 

}； 

))0； 


a 

app.js 
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注释磁貼答案 



(function() { 

$ (document) 


mobileinit 


, / 一 - 3fi © *6 In ^A^roldii 

page 红― 》) / 备沒古深嘈 

extend($.mobile, { defaultPageTransition : 'none' }); 


button to the nested list subpages 


mobile.page.prototype.options.addBackBtn = true ; 一 


initDevice = function()( 


localStorage 


if(typeof(window,localStorage) 


click handler 


•object• 


5(.foundTartan').click(tartanFound); 


addResetButton(); 


•’ buttons I 


^^3.°. ^ U > cflUstorfl 0 e (^：3 *J 
if ^ocitcteii 


rt&et 接 a 也！ 


I// Call the initDevice function when the DOM is ready 

$ (document).ready(initDevice); 

// Click handler for "I found it" button | 

var tartanFound = function(event) { 

I// Get the ID of the clicked button | 

var tartanKey = $ (event.currentTarqet) .attr(’id,); 

I// Store that this tartan was found| 

localStorage. setltem (tartanKey, •true ，）； ^ truC _ •成赶畜 ^ — - c, 


var addResr J 


// Create a button-styled <a> element 

var $resetButton = $(*<a></a>').attr('data-role',•button”.html(,sta 

// Add a click handler for the reset button | 

SresetButton.click(function() { 

// Clear all entries from localStorage~| : 。 这沒 它介绍 

Tocalbtcrage.clearoV - 


// Insert the reset button into the page 

^esetButton.appendTo($( f 释 booths *)); 


^ 舛妁 a 沒奇介绍 eL<Ar0 
J ： 你艏 t ) 己迕 or 仝嗞， 

衧 SS 义.它的忾用杖袅涑陰 
UxU » LStorfl 0 e 中觭节的级 >0 ■苒 
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检壺 浏览器支持 f 十么 

我们在第2章谈到 了一些 客户端特性检测，这里在 initDevice 中我们还要做这个 
II 作。通过检奔 window.localStorage 是否是一个对象，就是在检测浏览器是否 
支持 local Storage 特性 • 


var initDevice = function() { 

if (typeof(window.localstorage) 


'object') { 


$('.foundTartan*).click(tartanFound); 
addResetButton(); 


iif 我们宄成一签吝卢诔贫 
fj 检•別 ^ ff ReticleIf 
"4 ib •子 • reset ^5 t 贫光场 
保 i.>ilowiUstorfl0C 


r： 

t^tt>evice/i4(clocun*.tv\A：).readiLj0 Tra^iatlo^l ： if 
.用， j < S 2 i 绒吞兩诒化时弒舍狁这 个焱敎 


客户端特性检测可能很简单，就像这个例子一样，不过还有一些 JavaScript 
库可以为所有特性提供检测。 Modemizr ( http :// modemizr . rom ) 就是这样一个 
得到广泛使用的 X 具。 

不过请等等……故畢还没完嘹 



我幻2在攀5脅糾用 WKR . Ft _ t 2. 
旮钧力 ft 邛皋宅 破鞾作 检删砰 


剩下没有用到的注释磁贴给我们一个提示，从中可以看出这里还需要做些什 
么。我们要存储找到的花格布，另外要提供一种方法将它们全部清除，不过 
界面不变。我们要编写一些代码更新显.示，使参赛者能够看到他们已经找到 
了哪些花格布。翻开下一页开始吧。 


制下的铉坫，戟 
(ia «I (1 



.• 孩 备 kM _ 

只有在支持 localStorage 的情况下才增加 click 处理程序 
和 reset 按钮，这样实际上我们为支持 localStorage 的浏 
览器设置了一个“皮肤”，这是第4章的风格。你能想 
到为什么可以这样？另外为什么有些情况下不可以？ 


你现在的位置 ► 


339 




localStorage 搜索的关键 


用一个函数荔示哪些花袼布 B 经找到 

看来我们需要用 JavaScript 另外编写一个函数，根据已经找到的花格布 
更新 K 面的外观。下面来深入研究这个函数。我们要把这个新函数命 
名为 refreshTartans , 因为它会根据已经找到的花格布更新花格布列表外 
观和详细信息屏幕。 

index . html 中的各个嵌套列表 （ ul . details ) 分别包含一个供应商的有关 
信息和要寻找的花格布。我们用各个列表的 id 属性来确定一个 key ， 用 
来在 localStorage 中査找信息。如果对应这个 key 有某个值，说明这个花 
格布已经找到，我们要更新界面反映这一点。 
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to 卯 le 和切 ggleClass 方法 

toggle 和 toggleClass 是 jQuery 方法。 toggle 会切换一个元素 
的可见性， toggleClass 则切换对一个元素应用的 CSS 类。 


过續用洼拎蟪的茗签七舞在 
用爱这样 3 以约用碑式泉 2 .子_ 
咎花格 4 5 径我« . 


再来着迖个代码块 


. 系外不爲靠蠶 -IfbioujUtr 轉往 《*). 

gw • 璉用 toegk 在将 其孩藏 \ 





应该记得， localStorage.getUem(tartanKey ) 可能返回对应这个键存 屢竣用 2 哒 K 井们電屬一个右^的 

储的值（在这里就是字符串 •true*) , 或者返回 null 。 我们将它转 ( 不 ; T.4 字捋尊 'trut^n) 

换为一个 Boolean 值 （ true 或 false 〉，这样就能对 jQuery 的 toggleft< ^ / 


toggleClass 方法使用这个值了。 


如粟 UjcflLstorflge 中尽 
i&^rouvuiiA 



S •时达 © false . 


var foundValue = localStorage.getltem(tartanKey); 

var isFound = Boolean (fourdValue); 

$( 1 #vendor- 1 + mylD).toggleClass('found', isFound); 

$( 1 [data-url* 置 " ， +myID+•" 】 •>•toggleClass('found' , isFound); 
$( 1 #'+tartanKey).closest('li*).toggle(!isFound); 


如果 isFound 值为 true , toggleClass 会为与给定选择器匹配的元素增加指定 
的 CSS 类 ( found ), 如果为 false , 则刪除这个类。 

类似地，如果传人一个 Boolean true 值， toggle 会显.示指定的 < li > 元素。这 
里我们很聪明，用了一个小技巧，给定 isFound 当前值的相反值（这正 
是! isFound 的作 用）。 你可能会问为什么？嗯，我们希望如果这个花格布 
已经找到（即 isFound 为 true ) ,就将相应的 < li > 隐藏，也就是包含 14 1 found 
it !” 按钮的那个 < li >。 既然这个花格布已经找到，就没有必要再显示这个 
按钮了. ^ 


在 scripts/app.js 中增加完整的磁貼代码和 refreshTartans 函数。 refreshTartansll 要在页面初 
始化时调用，或者只要 localStorage 有修改就要调用这个函数。看看你能不能找出这 3 个 
refreshTartans 调用要分别放在代码的郦个位置。 



慧锘 釦粟个花将夺. 

个无棄沭加4隐藏 芭含、 

!•). 杖埘除这个类. 4 S 矛这个 軲纽」 
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刷新的花格布 


aoL 


要在 app.js 的以下3个位置调用 refreshTartans。 


§o(jitiort 




. G .龙我 到一个扣的在格 4- 


var initDevice = function() { 

if (typeof(window.localStorage) == * object') { 
$('.foundTartan').click(tartanFound); 

refreshTartans(); 

addResetButton(); 


var tartanFound = function(event) { 

var tartanKey = $(event.currentTarget).attr('id *)； 
localStorage.setltem(tartanKey, f true'); 

refreshTartans(); 


……以坆花格 
布重置时。 




var addResetButton = function() { 

var $resetButton = $(*<a></a>').attr(*data-role',^button'). 
html('start Over !*)； 

$resetButton.click(function() { 
localStorage.clear (); 
refreshTartans(); 

})； 

$resetButton.appendTo< $(•#booths')); 

}； 


圓」 


appjs 


——试—试- 

编辑 app.js, 加入前面几页的修改。保存文件，并在一个 Web 浏览器 
中预览 Tartan Hunt 的 index.html (应该能很好地工作）。试着点击某 
些花格布和相应的 “I found it!” 按钮。应该能看到找到的花格布及其 
洋细页面的某些 CSS 样式会发生改变（它们会变绿）。 

如果出现问题，可以使用 Chrome 或 Safari 中的 Web Inspector 工具，或 
者使用 Firefox 中的 Error Console, 检査可能的 JavaScript 错误。如果确 
实有困难，可以在 chapter8/extras/scripts/app.localStorage.js 找到这 
个文件的一个完成版本。 


果想使咐这个义件，你要把 
~你的 app.js 锌换为这个文什- c 



冉来压缩 chapter8 目录的 
内容，在 PhoneGap Build 
上重新构建应用。然后再 
在一个设备或模拟器上 
安装，试试看！ 
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tiierejare no 

Dumb Questions 


1^) :目前娜些浏览器支持 localStorage ? 

单 地说： 大多数洌見器都支持。不 
过不包括 Opera Mini , 另外如果你还在使用 
Internet Explorer 7，它也不支持 localStorage 。 

R ;这些键必须有特定的名字吗？ 

键以及为鍵指定的值都必須是字符串。 
不过除了这个要求之外，就没有其他限制了. 
你可以把它们叫做你喜欢的任何名字 B 

我能存储多少数据？ 

W 3 C localStorage 规范在这方面有些含糊。 
这里引用其中的 说法： “每个源建议最多存储 
5 MB 数据 D 欢迚大家的实现反愤，以便将来更 
新调整这个建议。" 

大多数洌览器都提供2到 5 MB „ 对于茱些洌見 
器，如 Safari , 如果分配的存谴空间用光，会 
提示用户分 fc 更多空间。 

| P ) .* 其他网站或应用能访问我的 
localStorage 数据吗？ 

不行.规范中有一部分有关安全性，对 
莱些方面做了强制要求，不允许其他源 （ T 以 
杻略地解释为其他 H 站）除他们自己的数据外 
访问任何其他 localStorage 数据。 


I 你说你只能在 localStorage 中存储 
字符串。不过，之前你提到过，可以使用 
localStorage 存储图像。这是怎么做到的？ 

¥ :字符串，没蟾。不过我们完全可以存储 
非常大的字符串！图像可以存谜为其 BASE 64 
编码的字符串，直接用作为 < img > src 属性的 
值，或者作为 CSS 背景图像中的 url () 值。洌見 
器町数据 UR 1 (这里没有写错）提供了很好的 
支持，只有 Internet Explorer 是个突出的例外。 
有关的更多内容可以看看 Nicholas Zakas 的这篇 
文幸： http :// bit . ly / sWe 7 HS . 

等一下！我刚刚又看了代码，注意到 
我们在嵌套列表页面上增加了一个后退按钮。 
对于 Android 设备这是没有意义的.大多数 
Android 设备都已经有一个硬件后退按钮了 a 

你的目光真厚利.在 Android 设备上，后 
退按钮不仅看着很丑陋，实际上它还会关闭 
PhoneGap Build 生成的应用！这可不好.稍后 
我们还会再来讨汾和修正这个问題. 

如果浏览器中可以用 localStorage ， 为 
什么我们还要用 PhoneGap Build 构建应用呢？ 
不能直接让它作为一个 Web 应用吗？ 

I :哈！付心点！我们就要谈到这个问題了. 
现在该在 Tartan Hunt 加入相杌了. 
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图片完美证明 


你找到了一个花梏布，是吗？那就证硝看看 f 

逢立并配1 一个 PhoneGap Build 项 H 。 打包压缩当前的 HTML . CSS 和图像， 
构违应用，并在 Android 设备或模拟器上安装这个应用。 

增加相应功能，允许参赛者标记他们已经找到的花格布。 ^ 一我用 

□ 增加相应功能.允许参赛者保存他们找到的花格布的照片。 

*? 


有一个达方 ® 的 API 

可以利用 W 3 C mediaCapture API 访问设备的音颊、视频和相机记 
录能力。它通过 JavaScript 中的 navigator . device 和 navigator . device . 
capture 对象提供这种访问。 



惰等苓。呔然玎认遍过剛 ediaCapture 
API 在中达闷 相机， 为计么还翥 
0 V , 矣观凍生 应用嚷 7 


确实有这样一个规范，不过它还很不成熟。 

0前还没冇哪个平台真正支持 mediaCapture API 。 
如果我们想用 JavaScript 访问相机，还是需要一些 
原生支持。 


释故 PhoneGap 的能 1 


到目前为止，我们还没有真正使用 PhoneGap 
API ! PhoneGap Build 已经做了一些工作，它能以 
原生方式封装和打包我们的 Web 代码。不过我们 
还没有利用 PhoneGap 来访问设备特性。该有点变 
化了！ 

在 PhoneGapBuild 生成的原生应用包中，可以找 
到 phonegap . js ， 利用这个跨平台的 API 可以访问 
那些吸引人的特性。要使用这个 API ， 只需要在 
你的 HTML 中包含这个脚本。 
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PhoneGap 的 JavaScript API 中有很多内容，包括很 
多重要的 JavaScript 事件。我们 K 正关心的事件是 
deviceready , PhoneGap 认为设备一切准备就绪时 
就会触发这个事件。可以在我们自己的 app.js 代码 
中査找这个事件。 

我们希望把 deviceready 事件绑定到•个回调函数， 
在这个函数中具体访问相机。 


用 PhoneGap 构建混合型移动 Web 应用 


霈要包 f phone gap, js , 
deviceread 
件。好珙鉍要扞拎 ： K 


潼过 益吻 dcvLtcready 辜碑 . 苟以 - --- .，外 一， 

X- • 出现”时将其祷提 

__ 1 _ 4 

jocument. addEventListener (' deviceready * , ini t PhoneGap, false)^J 


e ••未壬 ••；： 的 I 义吒必友萍不 (21 本说琅 

” At 气个/，.巧 . 霄夂 以 ㈣ 







^ 嘌我们乘蕃 ¥ 这个 

尨下皋魷 龙 写 ii 个 A 盘:^ 



试蓿做好准备，使用 PhoneGap , 

O 更新 index . html . 增加 phonegap . js 。 

你会注意到， chapter 8 文件夹中并没有 phonegap . js 文 
件 。 PhoneGap Build 在生成原生应用时，会负贵为各个原生应用增 
加这个脚本的正确版本。增加 < script > 标记，一旦我们构建应用， 
这个脚本就能很好地工作. 

Q 在 app . js 中的 initDevice 上面创建一个名为 initPhoneGap 的空函数。 
稍后将填写这个函数。 


0增加（上面的） deviceready 事件监听代码段，把它增加到 
initDevice 函数的最后。 

这样一来， PhoneGap 初始化设备时就会调用 initPhoneGap 。 


你现在的位置 ► 



填补缺口 



现在来看看更新后的 app . js ， 另外还在 index . html 文件中包含了 
phonegap . js 0 还有几件亊要做，然后就能真正访问相机了. 


(function() { 

$ (document).bind("mobileinit", function() { 

$.extend($.mobile, { defaultPageTransition 
$.mobile.page.prototype.options.addBackBtn 


<link rel='*stylesheet" href="style/jquerymobilel_0_min.css 11 /> 
clink rel="stylesheet" href="style/app.css" /> 

<script 8 rc="phonttgap. js"X/ 5 cript> 

〈script src=**scx:ipts/jqueryl_7_min• js"></script> 〆 

<script src= M scripts/app. js"x/script> 

<script src="scripts/jquerymobilel_0_min.js n x/script> 



芍祜耷点硐•决.©巧效们 t ) 3 的代砝签中沒有 

不过一 £在用构建.个卿本杖车 
1 a (£6|«……你正當 1^. 



’ . # 响.我 f] 丄_ 次奢 i G 后 
jcZKiry Mobilee ± , oj ^ 

本。 


index.html 
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PhoneGap $本准杳就緒， 玎认 出场了 


在 app.js 中再增加一些新技巧。 
了，是吗？ 


下面该填写那个 initPhoneGap 函数 


(if 个变署 . 

減们食用这个变#浓竑记录袅否访闳 
友神®<采捕较 e w ^^^ faLse , 


OK. 如粟 (4 
过 ii 签刑试 . 

wf.tdlaca}>tur6 




J 


1 



(function() { 

var imageCaptureSupported = false; 

$(document).bind("mobileinit", function() { 

$.extend($.mobile, { defaultPageTransition : 'none' }); 

$. mobile. page. prototype. options. addBackBtn = true; ®PP.J S 

; 釦粟戧们 t # 的茗吵鞾作;?:可用.妖 不秸鏈 

var initPhoneGap = function() { 》 

if (? navigator.device || !navigator.device.capture) { return; } 

imageCaptureSupported = true; 

if (device.platform && device.platform = 'Android，）{ 

$ (' body *) . addClass ( 1 android 1 ) ; Z 1 

« 太缚了！巧以检食吓的 dcvirCfpLcrt 和 kw 

^ H ^ ri «(I # a f 

var initDevice = function () 


在 initPhoneGap 函数（也就是 deviceready 回调） 中，我 
们通过两重检査确认是否能 i 方问 navigator.de vice . capture ， 
并将 imageCaptureSupported 设罝为 true 来指示支持这个图 
像捕获特性。 


蔌的 StyU/R^.&SS 中苟一个规 
妁 .< body > 无棄的类 ^A^droia 


然后（这一点太棒了），我们可以在 Android 平台上隐 
藏不必要的后退按钮（而且实际上这个按钮会有问题）。 
大多数 Android 设备都有硬件后退按钮，重复提供后退按 
钮会让用户困惑。不过如果希望在 iOS 设备 k 使用这个应 
用，就确实需要这样一个后退按钮。否則，用户没有办 
法冋到前一个屏幕。这个小代码块可以解决我们的问题。 



好的，可以开始 H 把这些准备工作 
放在 appjs 中，现在准备，灯光、摄像、 
开拍！ 
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认识 mediaCapture 


现在 准备使用 mediaCapture API 

与很多 PhoneGap 设备 API —样， PhoneGap mediaCapture API 模拟 l " W 3 C 
规范的 mediaCapture 支持。这个规范中有很多内容，其中有一个方法能 
帮助我们完成工作 • 下面就来认识认识这个 ima g eCa P ture 方法 • 

这瑀！例如. 4 0 **««^* 
咸功的 t 课用的&盘？ 龙.它 at 妗一个这瑀 




cOpturglw-fl0C € 社沒 
备的相犰.#抬採. 




OK 。 下面来看我们想嬰达到什么目的。我们希 
31 参裹者单击 “I found it !" 按钮时 M 发这个事 
件。 

它应该在设备上打开原生相机应用，让用户拍一 
张照片 • 一 旦参赛者对这张照片满意，表示确认_ 
就回到我们的 Tartan Hunt 应用，这里会发生两件 
事： 将这个花格布记录为 
摄的照片会出现在详细页面上 


M 


«从这里开始吧! 
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成功时如何处理? 


参赛者点击 “I found it !” 按钮时，假设他有一个带相机的设 
备，而且 PhoneGap Build mediaCapture 提供支持，我们希望调 
用 capture Image 0 


应该记得， capturelmage 的第一个参数是一个函数，如果一切正 


常会调用这个函数。理论上讲，我们的成功回调函数应该是这 
样： 


咭 . 达 个叫逐么 .. 

function itWorked(mediaFiles) { 

localStorage.setltem(tartanKey, mediaFiles[0].fullPath); 



^ cdlaFilts.iol .fuUPftth 含； 6 我 

们褪供數祀 中蓽— 


个®砵栌珞枝. 


我 了一 个送碣 
鬌求，珀一张翔片 （珩夹内 
容柺后介 绍）. 个數 
铂中 c 节一碭 


capturelmage 成功时，它会调用已定义的成功回调，为这个回调 
函数传入一个 MediaFile 对象列表 （JavaScript 数 组）. MediaFile 
并不包含文件，实际上，它包含了大量相关的元数据。不要灰 
心，因为其中已经包含我们需要的 东西： 图像文件在设备文件 
系统中的路径。另外这里不再保存没意思的 true 值，我们可以在 
localStorage 中保存这个图像的路径以备以后使用。 

如果出3问® 

如果相机使用不正常，比如说用户取消了相机功能，或者出了其 
他问题，我们还需要有一个错误回调函数。由于拍照时出问题不 
会造成太严重的后果，所以我们力求简单，只是把它记录到控制 
台上，这样感兴趣的人可以进一步调试。所以，错误回调可以像 
这样： 




up . 炎一 个铕 a ® 溻的例孑 。 


function ohSad(error) { 
console.log(error); 
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真实世界中的匿名 


庹实世界里总有点不罔 

准备认识扩展的 tartanFound 函数？要记住，参赛者单击某个花格布 
相应的“1 found it !" 按钮时就会执行这个函数。嗯，下面给出这个 
函数。必须承认，这爭.的更新看起来与之前展示的例 f •稍有些不 N 。 



var tartanFound = function(event) { 

var tartanKey = $(event.currentTarget).attr(* id'); 

、 （if (imageCaptureSupported) { 

navigator.device.capture.captureImage(function(mediaFiles) { 
localStorage.setltem(tartanKey, mediaFiles[0].fullPath); 
refreshT&rtans 0; ^ 一、 

}, captureError, {limit:!}); 


t^ediacapture, I 
系 13 这个鞾作刁 
用.芎以抬残了。 
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R 是匿名 

这里不再为 capturdmage 指定成功回调函数名，我们会直接在那里定义锒个函数。 

你可能会问，这有什么意义？看看我们如何把所点击的元素 ( event . currentTarget , 也就 
是 “I found it !” 按钮）的 id 属性陚给 tartanKey 变 S ? 通过把成功回调函数定义为一个匿 
名函数，我们可以根据羊-击了哪个按钮访问相应的 tartanKey 值。如果使用 tartan Found 函 
数之外定义的一个函数，就不能在当前上下文中访问这个值。 


^ if, ^ pf, 


( if 突出 S 矛的代芘 
4 绒功® 僱 基數. 



var tartanKey = $(event.currentTarget).attr('id *)； 
if(imageCaptureSupported) { 

navigator.device.capture.capturelmage( function(mediaFiles) 

localStorage.setltem(tartanKey, mediaFiles[0].fullPath); 
refreshTartans(); 

}, captureError, {limit:1}), 


裁们推宏？抟这函數名 
(这个蚤數在利赴定义.汜箏 

3^0^). 


这 I 1 ?1 用 5 tarta^tccij. 

9 k / 以麟荦 逢的签往珥到 
tflrtakvf^y (id) 


*犯刊以柁机法威的® 1 
律的 t 整珞巧卩嘩存 
U)taLstorcige 中- 


在我们的代码中， imageCapture 成功函数中更新了 localStorage 。 如果出于 
某种原因没能得到照片，花格布不会标志为已找到. 

你认为这样对吗？有没有更好的解决方法？ 
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照片的路径 



很离兴你能问这个问题。我们需要更新 
refreshTartans 函数。 

如果用户为一个给定的花格布拍了一张照片, 
要把这张照片显示在相应供应商摊位的详细 



重要的是，可以用我们存储的路径作为 img 元 
素的 src 属性。这并不难。 


Lotalstora^t 中车 一个择 /4 路柃 的. 芍以劍 違 一 
< L ^0 >xf , 把戏 fO 存 详的路 柃用作 个 无舞的 src 深 
ft . 埒它殓在否面的—个扣糾表走棄中 


«"list-divider r '>My Photo of the Tartan !</li>'); 
loldar) . appendTo ($ (this)); 
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cjs 

—— m—m - 

OK , 准备好了吗？ JavaScript 中做了一些加工处理，不过最后的 app . js 只有大 
约75行代码。我想对子一个完整的应用来说，这确实相当简练！ 

最后一点 f 

给你•个小小的 提示： 你可能希望在 COIlfig.XITll 文件中增加下面这两行代码。 
方向 （ orientation ) 首选项会保证在你启动相机应用时，设备 （尤其 是模拟 
器） 不会进人水平模式。第二行代码則指示 PhoneGap 我们想要使用 API 的相 
机特性，它会映射到正确的 Android 许可设筲。 


《preference naxne=" orientation" vaJue="portrait" /> 
<feature name=”http://api.phonegap.eom/l.0/caroera” /> 


1 

config.xml 


大功告成了。在看过前面几页大段的代码之后，深呼吸，放松一下。确 
保已经把所有修改加人到 app . js 中，并保存了对 config . xml 的修改。一切 
都准备好时，可以 ffl 次压缩 chapter 8 文件! fe ， 在 PhoneGap Build 中构建应 
用，然后上传更新后的代码。 

构建过程-日.完成，下载 APK 文件，把它安装在你的模拟器或设备上。记光 Jpft 释磙 # 



("Relax 


如果在一个模拟器上安装这个应 
用，即使相机有点问 H ， 也不会有 
大麻烦。 

我们发现，对于 Android 2.3 之前版 


本的模拟器，相机很不稳定。有时它们会锁住或崩 
溃。建议你的 AVD (Andmid 虚拟设备）使用史新的 
Android 版本。 


炙的很难码？ 

可以在 extras / scripts / app . final.js 
找到 app . js 的最后版本。 Android 应 
用 APK 文件的最后版本可以在 hup : 
// hf - mw . com / ch 8/ TartanHunt.apk 找到。 


即使在较新的模拟器上，相机体验也不完全是惊涔。 
有些模拟器只会显示一个白屏。另外一些模拟器可 
能会给出一个粗糙的动画。不过通常情况 K 它们确 
实能成功地生 成某种 图像。 


如霉你的，明 查笱- 个 Ad ⑺ id 
设备. 现 4? 以磺始 W 饫、.存 
衣正的设 & i ； 抝机含爷 t 妗 
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我们实现了原生 



掠定5 f 

诖立并 K 置一个 PhoneGap Build 项目。打包压 
缩当前的 HTML . CSS 和图像，构建应用，并在 
Android 设备或模拟器上安装这个应用。 

增加相应功能，允许参赛者标记他们已经找到的 
花格布。 

^ 增加相应功能，允许参赛者保存他们找到的花格 
布的照片。 
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^^BUUET POINTS 

■ 移动 Web 的发展已经为时不短。不过还有一些特 
性无法在浏览器中访问。 

■ 混合型应用方法是指从利用 HTML 5、 CSS 和 
JavaScript 标准编写的代码创建原生应用。混合 
型应用可以减少原生 幵发幵 销和复杂性，因为代 
码可以跨平台共享。 

■ PhoneGap 是一个用于构建原生应用的 HTML 5 
平台.它由总部在温哥华的 NUobi 公司创建。 
Nitobi 于201丨年秋天被 Adobe 收购。 

■ PhoneGap Build 是一个服务，允许 你在一 个简单 
的 web 界面中构建 PhoneGap 项目。 

■ PhoneGap Build 项目的组织类似于 W 3 C Web 部件 u 
它们至少需要一个开始文件 ( indcx . html ) 和一个 
配置文件 ( config . xml ). 


■ W 3 C localStorage API 允许在客户端直接存 储键值 
字符串数据。我们用它指示参赛者已经找到哪些 
花格布， 

■ phonegap . js 会自动增加到 PhoneGap Build 项目， 
使我们能够访问 PhoneGap JavaScript API 。 我们 
已经了解如何从 PhoneGap 监听 dcviceready 亊件， 
从而知道设备特性已经准备好，可以发挥作用 
了， 

■ 为了对我们的应用增加相机支持，这里使用了 
PhoneGap 的 mediaCapture API ,它效仿了 W 3 C 
mediaCapture API 。 

■ 我们使用 navigalor . device . capture.capturelmage 方法 
创建原生相机应用并拍照。 

■ 我们只需要区区75行 JavaScript 代码和一个 HTML 
页面就创建了一个跨平台的原生应用！ 
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9 如何实现未来矣好 

命 ^ 



响应式 Web 设计、设备检测、移动 Web 应用、 PhoneGap。 等一 

下……我们该用哪一 个呢？移动 Web 开发方法实在太多了。通常，项 
目中都会结合应用多种技术。这方面并没有惟一的正确答案。不过不用 
担心。关键是要学会“随波逐流”。掌提不确定性。用一种未来友好的 
思维，顺应潮流，确保-定要灵活，能够适应未来的一切变化。 
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决策.决策 


现在怎么 样嘹? 


很多不冏的方法。你究竞如何选择？ 


❿ 






移劫 web 策峰 

a (kS 式 welo 设 t ’ 十 

移劫0&光响应式 web 设紂 

漸逬缯殇 

荦独的移劫网站 

设备检测 

设备类 

移劫 web 应用 
j 62 K 6 ry Mobile 

凑线支持 

赵级移幼 web 应用 
Pho^e^flp/Apflche Cordo\/^ 
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太复杂？ 

我们必须面对这一切0随养设备数 S 的增多， Web 开发已经变 
得复杂得多。吏糟糕的是，在情况好转之前， Web 开发 可能会 
变得越来越困难 9 

如今发生着 R 新月异的 变化。 不仅新设备不断引人，这些设 
备中的技术和软件也在 S 速地变化。 

其至我们与计算机交互的方式也受到挑战，触馍式界面、相 
机输人和语音传感器为我们展示 r 新的 T: 作途径。 


我们该怎么做呢？面对这种不确定性，该如何设计让用户趋 
之若騖的体验呢？ 

滴除控制假象 


长期以来，我们一直都在欺骗自己，以为我们能够全盘控制 Phot 藥一个铋-子•东 

Web 。 0钍反鉍 3 vi 神 似象： 碎俅 



Sitt 


我扪霈要—种>伺的思 


我们的工具和处理方法中都充分反映出这种假 
像。通常，开始开发项目时，我们可能先在 
Photoshop 中创建-个模拟应用。 Photoshop 兹先 
会询问我们要逮立多大的画布。 

不过，没有哪一种画布大小能够适应各种情况。 
甚至对干桌面应用都没有•种各种情况都适用 
的大小设置。 

越早了解这个现实，就能越早开始学习如何 
构逮能够适应环境和用户的 ㈣ 站和应用。 


wtb 有®玄的 t 度一样- 




Cane 料 
k 岬 Ar «, e , 


维，要炜锣按矣多样惟, 
着瞄子筮应矛舟可鲜出 
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召集起来 


未来食好宣言 

你并不孤单。一大群移动开发人员被召集起来，大家一 
同头脑风暴，想办法应对 Web 的这种不断变化。召集的结 
果就是形成了这个未来友好宣言。 


这个 t 言？以在 I '), 



来来友好 



在当今这个不可思议而又充分困感的互连数字设备的世界里，我们要清楚以下事实才能做到先知先 

觉： 


纷乱只会更为加剧。互连设备（其中很多我们以前无从想过）的数置和种类将呈爆炸式增长，同样的，全世 
界使用这些设备的人无论从人数还是差异性来讲都在飞速增加。 

我们现有的标准，工作流和基础设施已经无力支撑。如今，设备的巨大冲击已经把这些标准推到潮头浪尖， 
对于前面的未知世界它们无力应对。 

专用的解决方案起初会占据统领地位。创新必须先行，才能引导标准化进程。技术专家会对这些解决方案趋 
之若鹜，之后才（再一次）意识到必须有一个标准化的平台才能保持稳健发展。 

这个标准化过程会很慢，而且这是一个非常痛苦的历程。我们要努力争取得到（并最终认可）适当的 标准。 
在此期间， Web 还会继续受专用解决方案的趋使。 
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* 新 的精鏟 * 

不过还是有希望的。尽管我们不能清楚地知道未来会带来什么，但是我们 可以: 
0承认并充分把握不确定性。 

0 用一 种未来友好的方式去思考、去行动。 

0帮助别人也这样做。 

只要友好，未来就是我们的。 


整« 



SIllPHANt RKGfif 
BRYAN REGER 


Home 


Thinking 


Resources 


我们 ft ' Cv (-.1 欢性職系 
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语义（和增强) 


如果你不能保证未来，那就实现来来食好嘈 


Web 未来会朝着什么方向走？这有太多的不确定性，所以我们必须构 
建尽可能灵活的网站和应用。这说明，尽管是在当下构建应用， m 要- 
直着眼干未来。 


由于不断催生出现新的设备，所以做到这一点并不容易。面对这种复 
杂性，与以往相比，人们更容易选择走捷径，构建那种只是今天可用 
的应用（也许只能在很少的设备上工作），而把统一访问和未来的设 
备抛在脑后，等着将来某一天再做打算。 

Web 开发总是需要折衷。关键是要想办法做出适当的妥协，不要以某 
种方式锁定你的内容和数据，以至于将来无法访问和变换。 



浚布万 全之策 


例如，移动优先响应式 Web 设计中对于图像就没有一种理想的解决方 
案。我们之所以选择 Senchajo Src (尽管它依赖于设备检测），是因为 
可以保证 HTML 标记不受影响。现在我们可以引入 Sencha.io Src , 如果 
有更好的解决方案出现，能很快地将其替换。 


类似地，如果有时需要完成浏览器还不 支持的 工作，可以选择类似 
PhoneGap 的技术，根据标准得到提示，而不是直接选取可能只有很短 
寿命的专用解决方案。 


要想在未来获得成功，关键在于语义标 id 和渐进增强。把重点放在这 
些原则上，你就能取得不错的成绩。 



从第8章开始 ， Tartan Hunt 中就融入了未来友好的思想，尽管这个应用构建为作为一 
个原生应用运行。查看 Tartan Hum 代码，并在桌面浏览器中打幵 index . html 。 

这个应用能工作吗？有没有什么遗漏的东西？ 

如果你需要这个应用最后的代码，可以在 http :// hf - mw . com / ch 9/ chapter 9. zip 下载。 


364 第 9 章 


如何实现未来友好 



一旦浏览器支持 
mediaCapture 
API , Tartan Hunt 就 
能做好准备，投入使用！ 


今天的应用，碘天的网页 






尽管 Tartan Hum 设计作为一个原牛应用，但这个应用确实可 
以在浏览器中 运行。 已经找到的花格布会 id 录下来，并用绿 
色突出显示。唯一缺少的是相机。 

由于我们采用了一种未来友好的方式设计这个应用，使用的 
是建议的 W 3 C 标准，所以尽管应用中有些部分现在不能用， 
但很 " r 能将来就能正常工作 r 。 






o 修改页面初始化函数。 

PhoneGap 、 jQuery 和 jQuery Mobile 可能在页面初始化和 JavaScript 事件 
创建的顺序方面出现不一致。简单地说，不能指望它们肯定按某个特定 
的顺序触发，所以 Tartan Hunt 中专门编写了一些代码来强制顺序。 


不过不用担心，要让 JavaScript 保证顺序，并不需要太多的技巧。你只 
需要修改一行代码。 


O 删除 Phonegap.js 的引用。 

等到浏览器达到登峰造极的水平，原生和 Web 之间不再有缺口，那时我 
们就不再需要 phonegap . js 库。尽管留下 phonegap . js 引用也不会造成什 
么破坏，不过浏览器会因此得到一个“文件未找到” (404) 错误。所 
以我们把这个引用去掉。 


粦似 •洚 样的策 

C . 


蒯除 PhoM 必 ap 引用 


可以做两个很小的调整.这会让应用将来在浏览器中工作得 
更好。 


htwU ft ) 软这一 


〈script src= M phonegap.js ,? x/script> 
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太空时代的思维 


澧长的 道路： 迖里有一些路标 

是不是希望想办法把那个未来友好宣言变成真正实用的策略 7 下面给 
出了 http :// futurefriend . ly 提 供的- 想法，可供参考^这些并不是规定， 

闪为没4人知道未来将会怎样，不过这些确实是需要关注的领域，要 
在你的工作中重点考虑。 


• 精*关注 • 

我们不可鏡在所有设备上实现所有功鏡.在这样一个设备*杂性不断增加的世 界置. 为了有 
效地进行眢理. a 们 is 治关注扉鳌对顳審和企业最重*的方蠆 • 不粟只 * 构建滴足最低爾求 


的鱗决方窠.两庄当 劁繾有 意义的内容和朦务.人们金《来越厌懵过多的額外内# (对 他们 
寒说.这盩珥篙只是| •声〉 . 并想办法进行简化，不断增加的多》«可籠也要求精简你的朦 

务.在此之前，以及在顧審嬰求之贿.应当明确你的雇务的籯点. 设备系嫌 驀求籩 可互鑤作的. w 備壮的 n 雄交 换嚴猶 保 5|1 

方式定文你的 数蠼. 


通用内容 • 

⑽的内#现在己秋为雇 B 设计的一个 

为 ft 鬌注奸⑽^抑缝力 抑甸 ft 神容鏞， 

社咐伽 m . 吻咖嫩 . 刪咖未柯 


|作性最害®的方 法. aau-r 

支持多神 < 煲活） 格式的访问和通知 

货调长期宪##. 

包含所有内軎的 （有 肅义的 } 待久 引用. 

支掩 « 弩擔作 . 


来知对象 


咖刪 • 
w w 以驀相应墦遺立你的内容 is 构并存 贿 内# 饗 对寄一 it 设备镛出 ttifi . 这使得全爾性设计«有罐度. 对应不 网设备與》嫌供 一组足 等闭合的 


裹 SMtMT 这样 可以篱化适应性调《过稽. 另外. 惮罐的簡_ 僮息珂 以对这鳌橄准做出补充_ 


轉设备與 B 归典咢以管9篇今的_ 遣商. m 时允许将来出现新的设备类 B . 



• L 集休行动 

我们的 生通中 有各神 各梓的 设备.这使得我们珥以在这 S 设鲁 之网分 置任务和儀息 • 和果一个应 


用艋•用于一个设备集.这个设备集中的餐个设备•鼴以最佳的状*楚蠼交互.这样就不再霪赛 
针对 每一个设备* 整 雕务的 所有方 ■. 允许我们充分 W 用备神设备能力. 
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备 O 备轚笔’ 


把这本书中的每一课与一个未来友好路标连线。可能每个路标对应 
不只一课。 

从本书学到的 

未来友好思想 

浼式(第1壤） 

鞘准兵法 

移动 tt 先（笫2棄） 


客户鏑袷谢（第6肇） 

交狳数蚝 

哪 置划分 ( K 4 t ) 

遍用沟容 

设杳检 M (第 5«) 


语义柝纪豫和第6肇） 

李知对象 

惟 - UU 支特（第6牽） 

* 体行动 

啗应式 Web 设计（第丨 «) 


设彔 J 6 (第5牽） 



你现在的位置 ► 


367 



你一直都在这样做 


♦ 卞 

—— O 备瞽《 - 

• 答索 

你可能认为这里有些课还用到了另外 •些未 来友好路标。下面是我 
们的答案。 


从本书学到的 未来友好思想 
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移动大餐 

要制作一顿可口的移动大餐，这意味着需要结合不同配料，调制新的口 
味。要让这些菜肴更美味，让它们更加未来友好，应该增加哪些配料？ 
请写在菜谱卡片上。 


f ; 一种方法从移动网 
站改进到桌面网站。 

烹翌 5站不包含桌面网 
站的全部内容. 


花枏布*好 者网站 


身 


瓤 


未来友好答案 


SoLutlOH 


下面是我们的 答案。 你能想到还 
可以用哪些方法来改进这些项目， 
让它们更加未来友好？ 


MoWe 的版本古珥趵 t 碎的沭殆 




问题 


动物关钚网站 

如《« 4 #拽的闽坫. 让人 « 
is 縴始 < ns * 迻用 嗶个用 坫,， 

， f；~ 种方法从移动网 ； 

站改进到桌面网站。抑…她 〆 

骛茳雯站不包含桌面网 coo| eie 的紹4 * 

站的全部内容 # 

< 3 用内容 

r 。 

昨叇的号羊飧的网站.人 fO 也芍秸 g , 澉 
站 t ?〕 在求 if 网玷 i : 錡戧宄硪的一忉 


问题 

在 BlackBerrv 5.0 上 )5 仃很 

慢。 

滚动很笨拙，也 很慢。 

有两个后 iE_ t 
1器提供的.另-个是应用 

创建的） 




多 


1 

菩户琏 役备桧 
谢， 

7 .S 枝®蜞批琢 
i 认 ； 




A 


创建的1 • 

详细页面上的花格^置内容 , 
即使用了 CSS 背署图像. 
__ — 二 


-4 


重&的后®接 a . a < 5 i * 4 咚， . iw .: 象功.^ 4 ® 
㈣ 中 《 kw ± 6 用.如用不在 

A^StOrt 中.衿 f+ 么 * 榉伏它 * r 


HTt7^*' 咖，崎 


非凡海 象网站 


认 C^s ® 後轉量 •） 


问题 

，所有内容都放在 

<(1^>中组织， 

， 地址是由<1)1：/>标记分隔 
的文本.标记没有任何 
语义含义. 



f 


— 


HTML-5^4 义尤舞 
( article , ^totlo ^ 4 ) 




仙⑽料 . T^TT^TTTT" 
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面向未來 


不要纠结于将来的设备和浏览器会提供什么。我们的世界中 
已经有各种各样的设备。从小屏幕到大屏幕，从移动手机到 
支持 Internet 的冰箱，你要做好准备处理任何设备。 


在 Web 标准坚实的基础上，利用渐进增强，你可以构建能 ih 
吏多人 访问的网站和应用。 


要把握住 Web 可能带来的不确定性。正是由干这种不确定 
性，为移动带来了大量机会，同时也充满了乐趣。 



继续前进吧，移动起来。逮设美好的未来! 


O 
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/其他 




6大主 i (我们没有谈到的) 



是不是感觉少了点什么？我们知道你是什么意思……你以为 

已经完成了，但实际上还有一些事情没有做。如果不再做一点补充 
(这些内容不适合放在前面的正文里），我们实在不忍心就此放手。 
至少如果你还没有一个带轮子的金属旅行箱，就想带着这本书闯荡 
世界，那是肯定不行的。来看看 （还） 少哪些内容。 
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在移动设备上测试 


叫在移动设备上蒯试 


移动测试很烦人。没错，我们只能这么说。真是没办法违心地夸它。如果一个 
手机在 +同的承栽网上有不同的表现，你就会知道情况很麻烦，你不能做任何 


假设。 

我们会采用以下做法来尽量保持冷静。 


M 狀的氺中色拿一个玆 
器的引用. 


o 


o 


o 



如果代码在桌面浏览器中出问题了，在移动浏览器上肯定也会出问题。 
最好先从我们更熟悉的环境开始.这些工具也更完善。一定要验证你 
的代码，尽早发现错误。 


使用移动横拟器和仿真器。 


几乎每个移动平台都提供了一个模拟器或仿真器 。 MaximilianoFirtman 
在他的 《Programming the Mobile Web » 书中整理了模拟器和仿真器的 
一个超强列表。 

他会在 http :// www . mobilexweb . com/emulators 定期更新这个列表。 


购入少置的设备。 


在桌面浏览器中从有效的代码开始着手。 


O 


购 买一些 手机是不可避免的。应该由你完成的项目类型和所面向的市 
场来指导你确定买哪些手机 # 明确那些关键的投资人会使用哪些手机 
来检查你的工作，这些设备也需要购进.每个项目都要把购买设备的 
成本加在预算里。 


讨要、借用.盗取。 


Pctcr-Paul KocV \ ? "5 一籌丈 
% "A List Apart", 苒中对 
子如句在托 K 咤芗 的代况下違 

议： WWW. fl Ustapfl Yt cov^/a rticUs/ 
browser- Ifl 


与同样在做移动开发的人联系，共享设备.可以考虑在你的社区创建一 
个设备中心协会，这样人们可以很容易地找到和分享设备。更好的是， 
你可以做得更棒，可以建立一个社区设备测试实验室，就像我们在波兰 
建立的那个测试实验室一样。 
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其他 



访问当地的移动测试中心。 

几 乎每个城市都有一个移动设备测试中心。通常它们更常用的 A 字是^ 例如 
运营商门店。 VCKi 2 

大多数运营商门店都允许人们试用设备。他们不太可能让你整天把办公 
室转移到他们店里，不过绝对不会阻止你在多个设备上测试你的网站， 

要如实告诉他们你在做什么，并感谢他们的帮助。你会发现，销售人 
员还会给你提供很好的建议，告诉你哪些设备卖得好，这会对你的工 
作很有意义。 


远程设备测试服务。 

有时你确实需要测试一个特定的场景。例如，你需要一个特定的手机 
款式，不过这种款式只在某个特定地区才有售，仅由某个运营商独家 
供应。在这些情况下，唯一的办法就是利用远程设备测试服务。 

Device Anywhere (http://deviceanywhere.com) 和 Perfecto Mobile 
(http://perfectomobile.com) 允许远程访问世界各地数据中心的真正的 
手机。世界各地都有数据中心，这意味着你可以在当地的一个特定手 
机上测试（这个手机在当地无线提供商运营的网络上运行），并能看 
到使用这个手机的人在他自己的国家得到的真实 体验。 

这两个服务都按小时收费，这说明你要力求高效，否则会向你收取高 
额的测试费用。 


设定测试的优先级。 

即使你能访问已经生产的每一个设备，也没有足够的时间在所有设备上 
进行测试。要选择有代表性的设备，之前在项目中已经确定了客户最有 
可能使用的设备，要根据为此所做的决策确定测试的优先级。 
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远程调试 


巧迗 程调试 


我们已经讨论过，要査看在一个移动浏览器上发生了什么，这是相当困难的。 
不过，即使你能看到发生了什么，要想在这样的小屏幕上完成大 t 应用开发也 
是很难想象的。 


远程调试可以解决这个问题，可以把移动浏览器连接到-个桌面调试工具，这 
样你就能査看移动浏览器中发生了什么。 

WEb INspeetor REmote ( wcihre ) 


远程调试有很多不同的选择，不过大多数设备和浏览器都可以使用 weinre (读^ 

作 winery ) 。 weinre 是一个开源项目，由 WebKit 资助人 Patrick Mueller 发起，后 
来被收至 PhoneGap 訂. 

. , ^ //?h0 ^^ b c Bn 

weinre 如何工作 








的 ip 地武播 


行的叇 cv 


<script src="http: // IP_ADDRESS : 8081/ 

target/target-script-min.js H ></script> 


/ o |#*刑'88 扣祎功刻 ％ 8 邾戗;* 
s 至叫⑽ 的 

个人 d 霣机 i ： 注 % # 


把 Ci 个携扣 f ’） 



\ c => i 


w <： u ^ J « vascri p t 检 f d 个 




S 孑法涝 web 否# 
的移砝 设眷 u 



- 




wtUrc.l^ra 5Tk/.<^^- 
残 Ma e 左用 


weiy^re^ 务器龙 更扣 4 
占 f *) 求麥客户叇 . rtt 

ii 七如防 ― ta % 器 A * ti s ^-n^M « s 扣 oj 

ittei ㈣ ® 

扣 a ® 洽鬼务 s c 



尜 <S>wti*^rt 審户揉罨起乘 
琢{■摩 Chroi\c< 扣 Safari 中 
的 wek ) i »^ spcctt > r a 
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其他 


运行 welwre 服务器 


运行 weinre 服务器并没有火箭科学那么高深，不过也不算太简单。幸运 


的是， PhoneGap 有好心人已经建立了一个公共 weinre 服务器，可供我们 
使用。你只需要一个桌面浏览器和一个移动浏览器，另外要访问 Web 。 


使用 Chrome 或 Safari 访问 debug . phonegap . com 。 




这个页面分为3个步骤，都很容易。第1步需 
要提供一个 guid (全局唯一标识符 ， globally 
unique identifier ) # 基本说来，你要选择一 
个词或短语，创建你自己的 weinre 測试服务， 
从而不允许别人试图使用同一个测试实例。 


0创建一个 HTML 文档来完成测试。 

用以下标记创建一个新的 HTML 文档，保存为 
weinre . html . 增力口 debug . phonegap . com 提 
供的 < script > 标记，并把更新的文件放在一 
个公共 Web 服务器上。 


-- - ^ ^ ® ' fi : . ro ^ 

Getting Started 




Step 2" Ih.* scftt* mio v-Oi# 

S«ep 3; dick WtUnhXitait d0Du>jg.f«g 


0 



a 


weinre.html 


<!DOCTYPE html> 

<htral lang="en"> 

<head> 

<title>Weinre Example</title> 

<style type="text/css"> 
hi {color:red} 

#box {background:Iffc;padding:lOpx;width: 70%; height:200px;} 
</style> 

<script src= w http://debug.phonegap.com/target/ 
target-script-min. js#hfmw"X/*cript> 

</head> 

<body> 核记 . 

<hl>Weinre test page</hl> 

<p id= ,, box w >This starts as a yellow box.</p> 

</body> 

</html> 


• 存一个公共 web 
碾务 

在 {i 个鬼务 》上 
劣威谢试。 


出子吝 全祙®, 
蕾这个 5 t 件. 
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^ 在一个 

0 在一个移动浏览器中打开 weinre.html。 i (£(■?«*)wei«^e 

确保浏览 器支制 抑连接.所有 And : o L d ；^ hor L e S !，5 U — 

手机都能正常工作。你会看到-个激试页面，其中有 1 很 

的黄色方框和一个红色标题。 


0验证调试器工具己经连接到设备。 


祖 UL - - --- 

=具如 s 有二二 


+ unp t /<»eDu«.Ohone«>iP co，n 


二.土, 

tumeir , .-心 ■ 、 w 以 


. 二’二 0 


通过远程调试 


o o o 

4 w. :’• ， • 《 . 


0开始 调试。 

点击 debug.phonegap.com 上第 3 步下的链 
接，开始调试。 

葷击 这个链戏科邊 


Getting Started 


SUp 3 ： ctic^ i.a fo start d*tt»ggir^ 


< HS 减 H 你含⑽ 
—个兔似下乐的负* 6 


列 羝器穿 o 籽较斿 达沒荀 
邊44 0杉设备。 


现 旮我们 1 •:«试的设 
.备古 >•) 在这要 

V _ jw 


O O O wtinrf. hup / /MWMt.dowdfour cafn/hr-m«v ； top 6 /«)ii/in(fcii.himl 

， .H ; <A I 1 冰 I . • . : •、嫌 I ♦ http //dtbug pfton«^4p com/rten f 
■ ^7*5. -1_ 二 . ."~. .. — iV Mttnrr li'i iT * Ifcvafa 1 **Mu »>■* rtmaMWL > ft .. w 

— 上'*^」：?*— __ : - ■ 


c-71-?37-19S-s« nsdl.or tom»«-«e< [tA*noe». 9^0)991^6 »d hfr»«vj - 
hito ! /«vw<v«.cloudff>uf.cum rtyt «m».'Cop6^esl/lnde)r html 
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其他 


紐究 weinre 检查器工異 


既然已经建立了连接，可以看到一个检査器工具，这个版本比 Google 
Chrome 和 Safari 提供的 Web Inspector 稍有些简化。 



<p td^'box" 
This Storti 


Com puled Style 

• bockqrourHl ottocfmnt : icroll; 

• bQCkqrounA dtp: border box; 

► bockqround-color ： #FK; 

► bock^roaiml ira()«: none; 

► bockqrovrK) or\<jin: po<Mlng t>OK ； 
dt&ploy: block; 

• het^it: ZOOpa, 

► podding botton: 10px ： 

► poflOinQ left ： iepx; 

► pocJd\n<} riQht: 10pv 

► paoiJ\n^ top: lepx; 

» width: 212px; 


St>ics 

Letnent 



你可能以为练习已经完成了，是不是？我们也这么想.不过这是一个很有意思的练习。可以 
使用检査器工具对 Web 页面做一些修改，观察你的手机上的变化。 

1. 把鼠标停在 Elements (元素）标签页的 HTML 标记上。移动浏览器中会发生什么？ 

2. 使用检查器工具把背景色从黄色改为另一种颜色。 

3. 使用 JavaScript 控制台在移动浏览器上触发一个警告。 
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练习答案 



§0(.ytl0H 


在 weinre 检查器工具中做出修改后会施展一些魔法，可以观察到这些修改会立刻显示在移动 
浏览器上 # 

1.把鼠标停在 Elements (元素）标签页的 HTML 标记上。移动浏览器中会发生什么？ 

在桌面远程检查器工具中将鼠标停在元素上时，移动浏览器上这些元素会突出显示。 





-oo» 






其他 


3. 使用 JavaScript 控制台在移动浏览器上触发一个瞀告。 



一个阑荤的 ” HeLLo worlf^'' javascript 

ft , 、 


- hnp cloudW.cn^hf- m^, O0fc/t , l/lotleK>tml 
: ’ 二 ^! 二 ’ -U.T 笔 七 ♦ 、 ， - p>»cw»gao torn • client■ yfrfnjA c q. 

^ 'SJ 1 

_cte«»rat ftcfowcn 


Imw* 

0»«rtfHcllo t 




' 龙 aUrt 代这植入 f ‘) Co^&ole (控刳会）杉备兩 60 茲 ■ ：5 ■•穿 O 中. 


’m 这个？ 苦含达 
现旮终站冬 tii 



esti9ns 


1^) ^ debug.phonegap com 安全 


吗？为什么不托管 Web 页面？ 


安全问題很少见。如果有人要 
使坏，他需要知道你的 weinre 服务器 
的 URL . 而且你那时正好在使用服务 
器，如果满足这些条件，他就能向你 
的浏览器发送恶意的 JavaScript . 


正像我们说的，这种情况不太可能发 
生，除非你公开发布了 weinre 服务器 
的 URL (比如说在一本书中公开出 
版）， 并托管一个測试页面，告诉 
所有人去使用这个页面，犮布这个页 
面会让它成为恶意攻击者的目标。 


IpI 你提到了其他的调试器工具. 
有哪些呢？ 

» Opera Dragon fly ( htip :// opera . 
com / dragonfly /> 有一个远狂调 
试器工具，可以与 Opera 洌览器 
姑合 使用 。 BlackBerry Playbook 

和 BlackBerry OS 在版本7之后都对 
元素调试提供了内置支持 。 WebKit 
本身包含了一些工具来完成远程调 
试，不过大多数洌览器中都关闭了 
这些特性。我们写完这个附录的 
前一天 ， Maximiliano Firtman 创建 
了 iNVeblnspector ( http :// iwebinspector . 


com ), 这是一个面向 iOS 的远裎谓试 
器工具。我们还没有对它做过测试。 

: Adobe 收购了 Nitobi ， 也就是 
PhoneGap 的前身，这是不是意味 
着 debug . phonegap . com 会消失？ 

¥:我们已经确保这个服务不会消 
失。即使真有这种夢情发生，你仍 
然能下栽 weinre ， 并在你的本地机器 
上运行。 
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浏览器支持 


衫碥定浏览器支特什么 


利用渐进增强来支持能力更强的浏览器间然不错，不过如果花那么多 
时间构逮某个功能来使用某个浏览器特性，但是只有很少数的设备能 
使用这个特性，这么做真的值得吗？ 

某些情况下，你吋能希望知道哪些浏览器能够利用你基干陀螺仪构建 4 
的导航。 

列出各个浏览器支持啷些特性 

下面这些网站着力列举出各个浏览器及其支持的特性。 

/田蒼 “a 锊么的砵耗 f 逢用. 
的用 II- 


、逬 


caniuse.com 


二 * 二 

找象務 • 





琛沒几，乎宅 含荚: 孑移以 
列 邛 以茯:•表姑的馎吝. 
另外2 9以赍卷 MabtUsm . (i 
基估钼衣的含议._ 
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其他 


谢试你的洌览器支持什么 


如果你要访 H —个浏览器，想知道它支持哪些特性，下面这些网 
站会更有帮助。访问一次就能全面了解。 


haz.io 



html5test.com 


( www . v^odtrv'^z.r 
淛试饬的到％器时 




检奢仂 的浏 )8 器的一 
作况.#给出葸分。 


或者同时俄达两件事 


广 w S ， e . « … ，料 

&™ w S£rsoope API(4 ¥tf .^ ..； 

名⑺ W « KS _ 數效的价 2 奂 S ♦*£ • 增 岑 


Browscrsco ^ C ^ Wflz . lo - 样衝 试別 ％ 器一 
为鞾性的1邛.另外它 还金艰 躭记录•歧 
洌％ »以前 3 鲶洼过測试（威 4 吏蛀） .. 


browserscope.org 


^biowserscope aSBBBHBBBSMBBBMflHHHH 
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设备 API 


^4设备 API 

尽管个头很小， m 移动 〒- 机绝对是功能强大的设备，配备有很多超强的 
能力，比如通信录、 F 1 历、短信、振动、传感器和 I 者如近场通信等新技 
术。我们在 PhoneGap 应用中只是对相机的使用稍稍触及•点皮毛。 

如果浏览器开始支持设备 API , 至少从理论上讲会使很多方面成为可能。 

什么是设备 API ? 

原先，设备 API 这个词是指在移动设备上可用而在桌面 h 不可用的一组 
特定功能。手机相机就是这方面很常用的一个例子。 

很多特定的功能原先似乎只有移动设备上才有，但是现在已经全面面向 
各种浏览器，从为 U 历增加事件到访问系统信息（如 CPU 使用情况和网 
速）都能提供。 

尽管范围变得更宽，但重点还是一样，仍然是允许浏览器访问成就 r 移 
动设备的那些特性。 

PAP 和 WAC 设 S 的标准 

引领设备 API 标准化的两大组织是 W 3 C 的设备 API 工作组 (Device 
APIs Working Group , DAP ) 和大规模应用社区 （Wholesale 
Applications Community ， WAC ) 。 

你 吋能比 较熟悉 W 3 C ， 因为它为 HTML 和 CSS 设置了标准，不过可 
能还没有听说过 WAC 。 

WAC 最初是由 N 络经营厂家和手持设备制造商发起的，眷力为应用 )!, 
开发创建一个公共平台。他们选择了 HTML 5, 并结合了两个现有的 
标准形成 WAC 2.0 标准。 

WAC 和 DAP 之间存在大量重奋，包括他们所写的规范，以及参加组 
织的成员。实际上，他们的协作多于竞争。 

咁起来很不铐。那么为什么不在书中介绍设备 

API 承? 

还没有太多浏览器支持设备 API 。 很多标 准还处干早期开发阶段。 

希望到我们写这本书第二版的时候，这些标准已经很常见，那时也 
许我们需要用好几章专门介绍利用设备 API 可以做到哪些酷炫的亨 
情。 
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其他 


叫中以的、忡 Store.• 耷？耷的奈杉 •. ^y.^r± 

一的在用眘坊 # Aprp Store ^ 

不柃爷用因扑从现夺；诒戧们却灯 
^ 左用 } 赛这 (a^ltcffttoio. stone) 

你已经构建了不错的 Web 应用，把它包装在 PhoneGap 中，希 
望它成为畅销应用。怎么能在应用商店里大賺一笔呢？ 

擧 实上： 大多数应用郐会醅钱 

这并不表示你的应用不会成为例外，不过确实说明对于能不 
能让你致富还是要现实一点。 

另外，应用的意义可能体现在很多方面，特别是那些并不依靠 
出枵应 用来谋生的公 H 】， 他们只是需要利用应用来扩大已有的 
业务。 

毎个人鄯冇一个裔店…… 

现在的商店实在太多了。无线行业联合会 （Wireless Industry 
Partnership , W 1 P ) 维护了一个数据库，其中包括它能找到的所 
有应用商店。根据最新统计，现在有120个不同的应用商店。 

*• W 在 http ： //wi|>COKLKC€CtOK.COWl/ 

每个商店有不同的条款和规则，推广应用的方式更是多种多^ ^ 4 % 

样。选择实在是太多了。 

……现在义加入？ Web 应用 

最新趋势是所谓的 HTML 5 应用商店。 GoogleChrome、Mozilla 
和很多较小的公司都为基于 Web 的应用销售创建了新的应用商 
店。 

一些非专让建议 

我们并不是应用商店专家。你要到别处看看有没有更好的指 
导。不过可以告诉你三 件亊： 

0要研究市场和重要的应用商店。 

了解你的竞争对手都在做什么。对于你将加入的应用商店以及它更愿意推广哪些类型的应用，你要有更 
多了解。先做好功课。 

0准备好一个传统的市场营销计划。 

不要以为被 Apple 看重就大获成功了。这不是全部。只是构建应用还 不够。 

0要让你的应用感觉完全针对于用户的平台。 

也许你使用了跨平台工具来完成应用的构建，但这并不表示 Android 用户了解一个 iPhone 应用如何工作。 
要让你的应用感觉就是针对用户平台构建的。 



巧应用裔唐和分崖 
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适应性内容 


^Tinternet. Everywhere. 

oil 6*1 




愚蠢的 

Web 服务器 以为没的 


細 n ' 1 我们的 H 标应该是确保每一部分都尽可能聪明。 

/ 类似 RESS 的解决方案试图找到一种方法，能够使 

ri ^ ：//WwwsUd4sha ^ 客户和服务器共同分担责任，提供绝妙的用户体 

^yyub ue . com * * « 7 « _ 的方法验 


ms ： 响应式设计 + 服务器端组件 

(REspohsive design + Server-Side) 

长远来看，我们并不认为响应式 Web 设计或设备检测会变得重要得 it 其 
他技术完全消失。如果要说点什么，只能说我们认为这些技术的组合在 


很多情况下会很有意义。 

Luke Wroblewski 为这个组合（响应式设计加服务器端 测试〉 
给出 f 一个名字，他把它叫做 RESS 。 

Luke 所称的 RESS 技术与 Yiibu . com 的所有者 Bryan 和 
Stephanie Rieger 采用的一些基础技术并没有太大差别。 

Bryan 和 Stephanie 使用设备检测对浏览器的能力做出最准 
确的猜测，然后使用客户端 JavaScript 来验证设备检测是正 
确的，如果不正确则修正可能的问题。 JavaScript 还会设置 
一个 cookie , 为服务器提供信息，可以对它之前做出的错 
误假设进行更正。 






feHHeuj 

息 






.- 一, •、- 一- 、 




•y/lorowsc'" 


*5 








Fun. Fast- Easy to use. 


RKS 的丰来 

很难说 RESS 这个名字能不能一直保留，不过将响应式 Web 设 
计和服务器端技术结合起来，这个槪念对我们来说确实很有 
意义。如果没有这个组合，我们不难想起移动技术专家 Jon 
Ames SaeterSs 最近给出的一个示意图。 



^ ^ inai 
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ii 勝旁粽钚埃 

+ h 开始7 



没有 “ Web ” ， “移动 Web ” 无从谈起。 对于这一点绝对没有异议。如 
果要完成移动 Web 开发，肯定需要有一个 Web 服务器。这远不只是完成本书中 
的练习那么简单。你要把你的 Web 托管内容放在某个地方，不论是使用一个第 
三方商业 Web 托管服务，还是企业级数据中心，或者甚至是你自己的计算机。 
在这个附录中，我们将带领你在你的计算机上逐步建立一个本地 Web 服务器， 
并使用免费开源的软件运行 PHP 。 
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开始之前 

你要傲的准备 

要完成本书中的练习，你需要做儿件事。不用担心。没 
有你想象中那么棺，我们会告诉你怎么做。 


0要提供 Web 页面文档（如 HTML 页面）和资源（图像、 CSS, JavaScript 等） • 

这是 Web 服务器的根本，是不是？所以我们需要有一些 Web 服务器软件，并完 
成 配置， 

O 霑要 执行服务器端 PHP 脚本。 

这本书的琢习使用了 PHP (PHP ： Hypertext Preprocessor) 脚本语言来生 
成动态内容。尽管不需要你精通 PHP, 不过起码应该能够运行 PHP t 

O 至少要对你的 Web 服务器有一定程度的管理访问权限 u 

对于 Web 服务器提供的目录，你要对这些目录有一定的控制权限，而且 
要能够移动文件 # 










我们承诺过，建立自己的本地 Web 服务器并没有 
那么难.而且会非常有用。不过，确实并不要求 
你非得建立自己的 Web 服务器。 

但要保证你的环境满足一些需求。你的 PHP 版本应 
该是 5.2 或者更新版本。你要确保你的 PHP 有 GD 图 
像库和 SimpleXML 扩展包。不能确定？可以看看 
396页的说明，了解如何使用 phpinfo 函数来得到你 
的 PHP 环境的有关信息。 



388 附录2 



建立 Web 服务器环境 


R 在本她玎用 


现在我们要带着你在你自己的计算机上建立一个本地 
Web 服务器。 




Watch it 


我们会跟随这个附录安装一些 Web 软件包.不过这些软件包并不面向公共可访问的 
生产环境。 

由于这些工具只是为了帮助你在自己的计算机 h 完成简化的本地 Web 开发，它们在安 
全方面还有一些瑕疵。不能在外部可访问的 Web 服务器上使用这些工具。一定要当心！ 
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XAMPP 


Windows 和 Linux: 安装和紀蛋 XAMPP 


7栽 Web 服务器包软件 

我们要使用 XAMPP , 这是一个易千使用的 Web 集成 
I 具，其中包含 Apache Web 服务器软件和 PHP ， 这 
两样都是我们需要的 # 它还提供了 MySQL 关系数 
据席管理系统 （Relational Database Management 
System , RDBMS ) 和 Perl , 尽管这两个工具在这本书 
中没有直接用到，不过它们也很不错。 

把浏览器指向 www . apachefriends . org / en / xampp . 
html , 并选择适当的平台链接 （ Windows 或 Linux ) 。 
在你的计算机上下栽最新版本的 XAMPP 。 







絶^ t M 吵 c-CU 


Windows 环璜 7 的安装 


启动下栽的文件，运行安装程序。会提示你为 
XAMPP 选择一个安装目录。默认的 c :\ xampp \ 文 
件夹就很好。按照安装说明完成安装。 

然后可以从 Start (开始 ） —Programs (程 序） 
— XAMPP 启动 XAMPP 。 

•:泛 f 喝.，芍以 f 看你的 （孖诒） 

某鞏的 AU J > roQraiM ^ ( M 耷炫 4 ) 孑 
某辇,， 



[Bu«y- 
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建立 web 服务器环境 


启动 XAMPP 

Linux 用户.你玎认达样安装 

下载软件包之后，打开一个终端窗 n , 执行以下命令。 


你霜鬌赵边用户 



Ri : 还有更多信患 

要了解吏多命令、配置选项、一般信息和排错说明 ， Windows 
用户可以在 www . apachefriends . org / en / xampp - windows.html 
找到更多信息》如果你运行的是 Linux , 可以査看 www . 
apachefriends . org / en / xampp - linux.htmU . 

♦ 


你现在的位霣 ► 
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mamp 
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建立 Web 服务器环境 


碥保冇正碥的端 O 

在 Maci ： . 

Apache Web 服务器已经预打包 fMac OS X 的最新版本•这 

个服务器在端 U 80 运行，这是默认的 HTTP 端口 • 在浏览器 / ^ )' ( '* <4 f 3 

/ ^ ^ i»*i«rd.kv0 ( 共享） 中少 y 為 

中访问 http : 〃 localhost ， 就能访问你的 Mac 的默认 Web 服务器 Si * iTivveb (vvebft 4 ) 来 

( 如果它在运行）。正像我们前面所说，端口 80 是 «WMfl t {r#,w 4 bs/g 

默认的 HTPP 端口，所以 http : 〃 localhost 和 hUp://localhost: 

80都可以（也就是说，端口号不是必要 的）。 

我们安装 TMAMP , 因为还需要 PHP , 由于大多数 Mac 上已 
经有一个 Web 服务器 （ MAMP ) 在端口8888 h 运行。这说明， 

可以通过 http :// localhost :8888 访问 MAMP Web 服务器 • 如果需 
要，可以很容易地在 MAMP 首选项中改变端 口号。 

. 在 Windows 和 Llmjxi: 

酞认地， XAMPP 会在端口80运行。这说明，如果你在这个端 
口上运行了另一个 Web 服务器，就会有问题。在 Windows 上， 

可能需要先检査，确保没有运行 Windows IIS Web 服务器。 



通过 Start ( 开始 } — Control Panel ( 控制面板 ）— System and 
Security ( 系统和安全 ） -* Administrative Tools ( 管理工具 ）— Internet 
Information Services (IIS) Manager, 打幵 IIS Manager 。 


在 Actions ( 动 作） 面板中 . 点击 Stop ( 停 止）， 这会停止 USWeb 服 务器， 



如粟俅 涑 Sti 5在漱0名. 
2 可以纪更 Apache —个 
不阑的揉 oi ： Hfj 
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服务器测试 


钫问你的 Web 服务器 

你可能想在一个真正的移动设备上测试这本书中的一些例子, 
把你的计算机用作 Web 服务器。这是可以的，即使你的 Web 服 
务器只能在本地使用。按 F 面的要求确保你已经做好 准备： 


o 确定你的计算机的当前 ip 地址。 

localhost 都是相对的。它指示你目前所在的计算机，所 
以如果想从另一个设备（移动设备或其他设备）访问 
localhost , 会指向设备自身。 

要查找你的计算机的当前 IP 地址，在 Mac 或 Linux 上，可以 
从一个终端窗口运行命令 ifconfig 。 Windows 用户可以在开 
始菜单的搜索框中输入 cmd ， 这会得到一个命令行工具， 
然后在命令行工具中输入 ipconfig 来运行 ipconfig 命令。 

ifconfig (或 ipconfig ) 会输出你的计算机各个网卡的 
有关信息。查找一个以 eth 或 en ( Linux 或 Mac ) 或 IP 4 
( Windows ) 幵头的网卡，找到你的以太网卡的有关信息。 
可以在其中看到你当前的 IP 地址。 



要找到你的计算机 
的 IP 地址，而不 ft 
外部 IP 地址。 


http :// whatismyipaddress.com 
之类的工具很方便，可以帮助 
你很快找到你的外部 1 P 地址。 
不过这与你的计算机的 IP 地址并 
不一样。如果你在一个使用 
modem 和/或路由器连接到互联 
网的网络上，在这些网站上你看 
到的 IP 地址就是你的 modem 或路 
由器的外部 1 P 地址。用这个 IP 地 
址（很 可能） 无法访问你的计算 
机的 Web 服务器。 


o 确保你的设备在同一个网络上。 

要记住，如果你有一个内部 IP 地址，这个 IP 地址只能在同一 
个网络内部访问。需要访问你的 Web 服务器的设备都必须连 
接到同一个网络（对于移动设备，通常要通过 WiFi ) ^ 

冬 ^不塞忘记.如某你的蟪 0 咢不 
http ' J /- LO . O . O .3.： SS 8 S a 

作为 Windows 用户，是不是还有麻烦？查看这个 Apache 
Friends 支持论坛的貼子，其中对访问 XAMPP 服务器可能遇到 
的问题提供了解决 办法： http :// bit . ly / sG 3 QaO 。 
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建立 Web 服务器环境 


» 1 . 我8轻安浆了 Web * 务 
件， iSfiS 轻后动起采.不过 
我的沟 容放在 #置嚷7 tt 如说，托我的 
Web 灸驀放在#1? 


要把你的 Web 页面、资源和脚本放在你的 
Web 服务器的才能•到。 

服务器的文档根目录是表示网站最顶层（例 
如： http :// localhost / 或 http :// localhost :8888/) 
的文件系统路径。服务器默认文档根目录 
的位置取决于你安装的服务器软件和所使 
用的平台。 


得到文裆橾目彔 


对干运行 MAMP 的 Mac 用户，默认的文档根目录 
是 / Applications / MAMP / htdocs 。 可以保持这个路 
径不变，或者，如果你想改变这个位罝，可以在 
Preferences (首 选项） 的 Apache 标签页中编辑。 

对于使用 XAMPP 的 Windows 用户，文档根目录是 
\ xampp \ htdocs 0 对于使用 XAMPP 的 Linux 用户，文 
档根目录在 / opt / xampp / htdocs 。 

需要把希望从 Web 服务器访问的所有文件和目录都 
放在你的文档根目录中。 
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重要统计 


phplnfo, 拜托 5 

要验证正在运行的 PHP 的版本、选项、扩展包以及其他繁杂的细节， 
可以在你的文档根目录中创建一个名为 test . php 的文件，从而能通过 
http :// localhostAest.php 访问这个文件 * 

在这个文件中，只需要增加这样一行 代码： 


<?php phpinfo() ; ?> 


保存这个文件，并在 Web 浏览器中访问 http :// localhost / test.php 
这会告诉你 PHP 是否在运行，以及有关的所有信息。 





t 资安圣 i ： ® 斿牙正存运朽的 
PKPt*) iii ^ 


佟^ 3 pX 妨这命下检赍 gd 和 
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Hi 安装 WURFL 




搜翁设备 




要揭开设备检测的神秘面纱，第一步要做些调查工作 。优秀 

的侦探都知道，要解开谜团，必须搜集线索，询问0击证人。 首先， 
我们要找出行动的策 划者 ： WURFL PHP API 。 接 F 来，追踪行动 
者，将数以千计设备的能力信息放在一个 XML 数据文件中。不过还 
需要做些协调，才能让它们协作解决整件事情，所以我们要对配羿 
稍做调整，认真做些笔记。 



这是新的一章 397 




策划者和行动者 


淮是策划者 ? 


我们已经跟踪到 WURFLAPI 及其数据。下面是我们的I十划。 
□ 下教和安装 WURFL 的“策划 者”： PHPAPI 。 

□ 下栽和安装“行动 者 ”： WURFL XML 设备数 
据。 

□ 做一些微小的配置调整，并做一些 记录。 

T it API 

访问 WURFL PHP API 项目页面 ( http :// wurfl . sourceforge . net / 
叩 hp /) 。找到下载 WURFL AP 〖包的链接，从下载页面找到 
敁新版本。 

这就是 PHP API。 解压缩 F 载的文件，把得到目录入在你的 
计算机上的某个位置。具体放在哪里并不重要，只要你记住 
它在哪里就行了。 


WVRFL (Wireless 
Universal Resource 

件） 長一个?^势:辗 f ： 
件 ,包嚐移动玫安及其 
匆览粽的大 t 熊力和特 
惟夹持数辗。另外銥有 
一个戲用子芴适个数 
据艿件矣互。 我伯也乘 
要迗个 

■*vvk 吹吹 •細》 



Getting Started 

p，rsl » ® ur * you have Pi 

t*srea on Ljnu * wmoow < 

fun tn an v eni/Jn>n mem thtn 

• Oownioiid t/t« new VVUI 
. 一_ * Unpack it ,n any di rectl 


Hhi PHP API h* s b« en 
ns , •llhough ii should 


Vittf ://w“rfl. sou r^forge. /千 kp/ 


下戤蚤於的 API 
故本 .. 、 
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淮来行动 ? 


安装 WURFL 



PHPAPI 很聪明，不过如果没有它“身强 力壮- 的追随者 
( WURR ■设备数据 本身) ，它什么也做不了。 

要得到最新的 WURFL 设备数据 XML 文件，可以访问 h tt p :" wurf l . 


sourceforge . net / wurfl _ download . php ,, 你要先阅读并同意许可条款， 

才能下栽这个文件 • ^~ 

—旦下栽了文件，解压缩，把它重命名为并移动到 
WURFL PHP API 安装目录的 examples/resources/ 目录中（这个目录 ® E ^ ^ 

应该已经存在）. 〜 
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让 WURFL 完美出演 

让二者协作 

我们进展很顺利。现在需要对 WURFL 配置文件做些小 [7 f 下载和安装 WURFL 的“策划 者 ”： PHP 
小的修改，使我们的 API 和数据可以协同 r 作。 API 。 

编辑 WURFLAPI 安装目录中的文件 examples / resources / | v ( T 栽和安装“行动者 ”： WURFL XML 设 

wurfl - config . xml , 需要对其中一行代码做简黾的修改。 备数据。 

□ 做一些微小的配罝调整，并做一些记录。 





wurfl-config.xml 





wurfl^config.xml 

现旮 VVKRFU ATM 軚钱 
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安装 WURFL 


傲一点文件系统“宗务活” 

下而确保 WURFL 能得到它需要的所有“毛巾”。按照我们 
对 WURFL 的配置，它会使用文件系统缓存。所以我们要 
确保文件系统巳经对它的到来做好准备。 


首先，验证 WURFL API 目录中存在 examples / resources / 
storage 目录，它有两个子目 ^ cachc ^ persistcnce , 

你的 Web 服务器必须能够向这些目录写文件， WURFL 才能 
正常工作。对干 MAMP ( Mac ) ， 这可以自动做到，因为 
默认地， Apache Web 服务器会作为你自己的用户运行。所 
以，如果你可以写这些文件， Apache 也 M 样可以。 

不过，在 Windows 和 Linux 上就不同了。在 Windows 上，右 
键点击资源管理器中的 storage 文件夹，如果这个文件夹 
的“只读”属性选中，则取消选中。你会看到一个确认对 
话框，与这里 M 示的类似。另外，没错，你可能要对子文 
件夹和文件做一些修改。 


如粟还沒夯螫0录.现 


Confirm Attribute Changes 
Y«w Save chosen t. make the MoAmg artributp changes ： 
inset read-only 

Do /ou V»art to awly tt«s change to folder or4 v>0 
^P*V < to al sub^biders and fibs as <vd' 

"»d»Cr» Silly 

s fbkler. subfeklss 


：n 


1 Aop<y changes to this fi 




应该会很顒利。不过，如果出了 
tf-p 1 问腰，可以按 p H p 的说明来处理•… 

、如果这些文件系统家务活还没有把所有灰 
尘打印干净，或者 WURFL 配罝中还有些问 
题。通常 PHP 提醒、鳘告和错误会提示你发生了什么。 

如果处理 PHP 或 WURFL 例子时得到一个空白屏幕，说明你 
可能没有打开 PHP 错误显示。在出问题的 PHP 文件所在的目 
录中创建一个名为 .htaccess 的文件 （ 如果这个文件还不存 
在），并增加下面这行 代码： 


Linux 用户可以使用 ch mod 和 
chown , 直到他们认为设置合适 
为止！ 


php _ flag display _ errors on 
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( 至少 ） WURFL PHP API 的启发之路 




开始做第5章的练 >] 之前，需要记下你的系统上的几个路径。 


WURFLPHPAPI 代码路径 

第-个是 WURFL PHP API 代码位置的完整路径。它位于 
WURFL PHP API 目录的 WURFL 子目录中。 


fei . Wid 祕用户 则 S 嘈用⑽ 

的糾 2 *_.i 电 

系外一签方奁 ） e 


例如，如果你有 1.3.1 版本的 API ， 件把它安装在-个（虚构 
的） / awesome 目录下，你的路径就会是这样： 


紐4子伢沒哪 f 吝鉍 A 朽 
4个踣/ I 含有鰣不同. 


资课踣径 



的子第 5 轚中 ^IWKR-FL . 

伪 I 用你 t o^n<t n 


/ awesome / wurf 1- php - l .3.1/ WURFL / 





如竿•你苟一个扣板本的 afm . 
邾分金不同 


(； F 不•&赶在 

琿朶 Of 中） a 


这是 WURFL PHP API 目录中 examples / resources / 目录的完整路径。例如: 




/ awesome/wurf 1- php - l . 3 • 1 /examp 

< f ?. 的 vvkr^ l 數 j|I P 故在 
taf - 


的子 辈中的 resokrc&s wr/(5 . 
用伪 t» & 的珞 fi 依 


銥索 

(^ f 下栽和安装 WURFL 的“策划者 ”： PHP 
API . 

[7( 下栽和安装“行动者_ : WURFL XML 设 
备数据。 

[7^ 做一些微小 的配置 调整，并做一些 id 录。 
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iv 安装 Android SPK 和工爯 



要成为测试原生 Android 应用的主人，必 须当心 环境。 要把你的计算机变 

成一个条件宜人的小环境，在这里你可以在虚似（校拟）设备或真实设备 h “放 
牧” Android 应用。为了让你成为合格的牧羊人，管理好这些 Android 小羊，我们会 
告诉你如何下载 Android 软件开发包 (Android Software Development Kit , SDK ) ， 
如何安装一些平台工具，如何创建一些虚拟设备，以及如何安装和卸载应用。 
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电子元素也有生命 



访 Whttp :// developer . android . com / sdk , 
找到对应你的操作系统的卜'栽链接。 



avuiroid. 

coKwysrfte 


T 栽片 •解出 缩 SDK 软件。把得到的 Android SDK 文 
件夹放在你的计算机上存放应用的位置 • 

不错！现在你已经完成 tsdk 的安装（很容易，是 5 ^ 1 * 可以大丈闲 ftii 个 a «. 

不是 ）• 


现在需要向这个 SDK 增加另外一些包和工具，来 
完成我们的丁.作。 


建立 Android SPK 环璜的步骒 

对应你的计算机上的操作系统，下栽并安装适当的<- Ssit 咸. 

Android SDK 。 

□ 安装--些必要的平台: T 具和一些 Android 平台 (API 
版本） • 

□ 创建-个 Androidlt 拟设备 ( AVD )。 可以在这些模拟 
器上运行 Android 应用。 

□ 学习如何在模拟器和设备上安装和卸莪 Android 应 

用。 • 不过宅或 ii •李居含 

I 配腎 PATH 设置，从而可以更方便地运行 Andmid 工^^琢方嗖 

具。 
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安装 Android SDK 和工具 


TooJl 

夏 Android SOX Tool* 

<€ Android SOK Plstform tools 
.Android 4 0 (API 14) 

' Documenutton for Androtd SDK 
- SDK Plstform 
乙 for SDK 

• MM (A8t v7i 5yutm Im^gt 
^ Coogit APts by Coogle utc. 

- Andrew^ 3.2 (API 13) 

.Android 3 1 (API 12) 

• Android 3 0 (API II) 

.Andros 2 3 1 (API 10) 

Android 2.2 (API S) 

- Andros 2.1 (API 71 

• «- -« r - u ,« r MMmt *• _ _ ___ _ - , __ 

0 UpdMM/Ncw OMoitt* st>q Nn»o> 


身 1 niullcd 

畢 Hot m%uUtd 

軎 Not imtilled 
蜃 Not installed 
4 Hot mtUlltd 
善 Mot mtUMed 
唇 Not msuued 


^^rail S oatkiQf 


聋屬 《 辈签 

平会 ！«♦- 


台（板參） 



Son By ©AP1N 


• loMlrng paclugc« 


安装乎和工異 

我们希望安装一些平台（即 Android API 版本）和工具。为此，选中想要安装 
的项旁边的复选框。然后 继续： 


spW 备个 M 不一宅⑽^ 
A . v ^ irDidiA . ^ 


O 安装两个或三个 最新的 ^响平台. ， ^ r ^. 0 (WH0 ^_ b) 

写这本书时， 4.0 是 Android 的最新 版本. 我们还安装了 2.2 和 2.3.3, 用来系一个 . c ■赉釦 孕板电吆的 
提供另外一些可供测试的版本。如果你愿意，还可以安装更多的版本。 A ^ roid ^^, 釦菜汸 

也芍 以姿装 ii 个城本，不过@ 

O 安装 “ Tools ” 包。 个蜣本的樣扣器 H 稃舍冇 不 

阕的表珑， 

我们特别需要一个名为 adb 的工具，它在 Android SDK Platform 
Tools 包中。选中 Tools 包文件夹旁边的复选框。 


技到最含适的工異 


安装 SDK 很容易，不过这还只是开始，我们的工作还远没有结 
束。现在需要增加一些 Android 平台和工具。 

找到汴启动 android 执行文件。它应泫在 Android SDK 文件央的 
tools 目录中(对于 Windows 用户，这个文件名为 Android . bat ) 。 


起 6 •:矣钱寿爹 *) 
Android 芾 If 赛东 G 


vor » 


是 WtKU<£>WS X* ^ 
到的嗲 Jf 器竽 C 7 




AwdrcM SOK 





-V I 
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健谈的人，咖啡机 


Pat»« XML: http ： //Innovator.samsungmobilc.com/AndroMl/r*po«ilory/r«po$iU>ryjim1 
^cund CALAXY T«b by S4mMjng Electronics , Androtd AP1 8. revision 1 
r«uhirt 9 URL: htipr//dev«lop€r.»ony«rk*»onxo»»i/*dk/*»»dronl/f«po»»ioryjiml 
V 轟 lid 義 ur XML hnp://dcv«lop«f.sony«rKsson.com/«dk ； 4in«lrotd/r«po»liory-»ml 
Pars* XML hnp://<t«v*lop«r tonyericftsortxom/«dk/android / r«po»itoryjunl 
found COK 1.1 by Sony £r»c$son Mob*l« Commun<at»ofts AB. Arwjro«d API 10. r*v»$»oo 1 
Oftn* loading p«ckAO«s. 

Preparing to tnttall archives 

DoMnloAdlnfi AndroM SOK PUtform-tools, revision 9 
ln*ulling Android jOK W«iforrr-tool». rvviston 9 
•adb ktil server' fAiled nin manually if neccSMiry. 

Andro：d SDK Platform-tools. r»v»»on 9 
DownlMding Documentation for Android SOK. API 14, revision 1 


Oown»o«dmg Oocumcnution tor Androd SOK. API 14, revision 1 (269(. 1S38 Kit/S. S1 KfO 


单击 Install 桉钮，孖始煮 
咖啡 

一旦选择了平台版本和 Tools 包， 单击 Install 按钮， 
开始安装。这会花一点时间，具体地’某些系统 
可能需 要最多 10到20分钟的时间，所以你可以趁这 
个功夫喝点咖啡休息一 会儿。 


可餘含 f 到一个耷 
( if 类似的吝装 
d - 


ADB Restart 


&二 = D = 一—. 



吝装过杈中，芍铵古卷 
f ，) 类似 ( i 徉的一 个狨彡 
H 魚在丫 cs 烊后鏹纽> 


^ 对隱着算机上_作藏，下栽并安装适当的 Android SDK。 

0" 安装一些必要的平■台工具和一些 Android 平台 （API 版本）。 

□ 创建一个 And «Jid 虚拟设备 (AVDs). 可以在这些換拟器上运行 Android 

应用。 \ .* ifr ; 

□ 学习如何在模拟器和设备上安装和卸载 Android 应用， * .«!；•»)*.. 

□ 配 S1PATH 设置，从而可以更方便地运行 Android 工具。 
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虛枞设 I 梦？ 

基础已经 有了： 现在我们 需要一 些校拟设备。在 Android SDK 中，选择 
Tools —* Manage AVDs 菜申•项。 


widows X' t^A^roid SIX 

哿理 S 东 c 
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模拟的意义 

创建一个新的虡枞设杳 


在 AVD 管理器窗口中点击 New 按钮，会显示类似这样的 
一个窗口（这个栽屏图截自 Windows 系统> • 按照图中 

所示编辑设 W , 然后点 ifiCreateAVD (创建 AVD ) —个播 的名穹 单击 
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要启动一个特定的模拟设备，可以在列表中选中这个设备，然后单击 
Start 按钮。 


启动模拟 Android 设备可能*花些时间。 

启动模拟器可能是一个很慢的过程，特别是第 
次启动时需要的时间会比较长。耐心等一会 
儿，如果看起来时间很久也不要慌。 

如果确实发现模拟器无法启动或者崩溃了，要反复检査确保 SD 
卡没有设置得过大，另外要确保没有打开 Snapshot 选项。最后 
一点，对于某些版本，有时模拟器在一些系统上根本不能工作。 
如果你发现确实启动有困难，可以考虑换一个不同的 API 版本。 
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机器人组装……机器人 



X - 笔妫的一个 






I Android ^.OAVt> 
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应用安装，应用卸栽 

对应你的计算机上的操作系统，下裁并安装适当的 Android SDK 。 

安装一些必要的平台工具和一些 Android 平台 （ API 版 本）， 

[7 f 创建一个 Android 虚拟设备 < AVD )。 可以在这些模拟器上运行 
Android 应用。 

□ 学习如何在模拟器和设备上安装和卸载 Android 应用。 

□ 配置 PATH 设置，从而可以更方便地运行 Android 工具。 


还记得吧？我们下载了 Android SDK 之后安装了 
Platform Tools 包。这个包中包含一个程序 adb ， 

这是安装和卸载应用的关键，间时对干管理虚 
拟和真实的设备也非常重要。 

安装和卸栽应用的过程很 简单： 

O 确保目标模拟器 （ AVD ) 完全加载并运行，或者 
你的 Android 设备已经连接到计算机的 USB 口。 

分别使用 adb install 或 adb uninstall 命令来安装或 
卸栽指定的应用。 


adb 泰矛 
Android debug 
bridge (Jlndroidi^ 
试挣 K 

我们可％在梯轶榇和 
珙安上安綦、鄞我和 
馈试 /ndroid 应伊。 


安装 



$ adb install MyApp.APK 




卸栽 



$ adb uninstall com.foo.myApp 


Android 在用璉用 ; ava M 格的 
^_ 軚萍 袅逢序 的域名 
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走正确的路 




我们走得有点太急了！抱歡！ 

我们会告诉你在哪里找到•个可以安装的示例 Android 应用。不过， 
首先来了解如何运行这个 adb 命令。 


路径金找 


儿乎可以确定你的 PATH 中不会包括 Android SDK 工具（包括 adb ) 。 
所以，如果打开一个终端窗 U ， 或者使用 Window 的命令行工具，想 
要直接运行 abd ， 可能会得到一个错误消息。你的系统需要知道在哪 
里能找到 adb 才能正确地执行这个命令。 

建议你更新用户的 PATH ， 让它包含 Android SDKIlfl ： 的路径，这样 
你就能很容易地从命令行直接运行 adb 命令了。 


<5 wi^owsl: . 
用用分咢分 WL 


$P/TH 钚埃变囊 是 —个簧音穸搽的实件系 
路狀 级羚径到泰，你在命呤扶矛窗 P 中辅 

+个移序名时，換作系银佘在丁 H 抟龙的 
羚椏 T 崔找可执行衩 



逢常.蚊认祕这笆相很多0录. 
f 5 不在的0录 L 



(^elax 


如果无法指定 PATH ， 还有另外的办法。 

可以在运行 adb 时提供完整路径（例如， / Applications / android - sdk / 
platform - tools / adb ) ,或者可以把目录切换为 platform - tools 目录，然 
后运行 ./adb (需要有 •/) 。 
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找到 正碥的 PATH 

Mac 用户 

在终端窗 n 中，输人以下命令。然后需要关闭这个终端窗口，再打开一个新的窗 u . 修改才能生效。 


蓽一 个幸今含进入 
用 > 的主 © 求 


軲•移 .cif 蚪斤馑入旁今 
名 ㈠ 和犬扣咢（0)、 


(if 一起 含輩？ 14 (5 FXJ 



echo 'export PATH=${PATH} : /implications /< >/platform - tools• » .profile 


第二个旁今 .；iesiikL 乎台 i 其的踣 g 沒加 f*) 用 
户 .^rofiU X 哼中 砣夯 的專 PATH 変 i % 


荔;欠打并一个扣的终揉东 
含机行 ■ proflLe 。 


你靠嚣曼新 2— 部分 . At^ciroiol •中 
platform tooLs 0 录的路技一致 


Windows 用户 

A 在幵始菜单中，右键单击 -Computer" (计算 
机）， 然后进入 “Properties” （属 性） ，点 
击 “Advanced System Settings” （高级系统设 
置}。 在显示的对话框中，选择 -Advanced" 
(高 级） 标签页。 

0 在这个 K AdvarKed ” （高 级） 标签页中，单击 
“Environment Variables” （环境变置> 按钮, 
然后单击 “System Variables" (系统变量） 
部分中的 Path 变量。单击 “Edit” 《编辑 > • 

在 “Variable value" (变置值）域中，把光 
标放在当前值的末尾，输入一个分号 U ， 然后 
输入 Android SDK platform-tools 文件夹的路径。 
路径最后不必再加一个分号。单击 0 K 多次，逐 
个确认并关闭相应的对话框。 


0 需要注销，然后再次登录，这个修改才能生效。 



Linux 用户，应该不霈要向你 


介招这一步怎么做吧。 
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——试一试 

好了，我们拭目以待的时刻终于到了。下面就来试一试，在一个横拟器上安装和卸 
载一个测试应用。 

从 http :// hf - mw . com / ch8 / PhoneGap . apk 下载 PhoneGap Build 
演示 Android 应用。 

0如果 Android SDK 还没有运行，将其启动 # 

0启动一个 AVD (模拟的虚拟设备），为此进入 Tools — 

Manage AVDs ， 从列表中选择一个 AVD , 并启动这个 AVD 。 


0 等待模拟设备完全加载。 

0 打开一 个终端窗口或命令行工具。把目录切换到下载 APK 文 
件的位置。 

运行下面的命令： a % ^ ttii I T4PATH . 印含 

pUitfbr 从 -toots0 求 .， 否則 . 9 桃熏 f i6flc(k) 祛供宪 f 
路碩 , 

$ adb install PhoneGap.apk| 


Q 现在应该能够在你的模拟设备的应用屏幕上看到这个 
PhoneGap 示例应用了可以启动应用，试着运行看看， 


0 从命令行运行下面的命令，卸载这个应用。 





"0CttlKV0 

started" 在用的 fen 
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therejare no 

Dumb Questions 


问: 


什么是 Android 包文件？ 


问: 


: Android 包文件 （Android 
Package File , APK ) 是一个打包的原 
生 Android 应用。它包含编译的应用代 
码，以及应用的各种資源， 

APK 是一种 Java 归档文件 （Java 
Archive File , JAR ) 。如果你想知道 
一个特定的 APK 里有什么，通常可以 
把扩展名改为 . zip ， 然后解压縮这个文 
件，这样就能“哄骗”计算机为你显 
示它的内容。看看吧！ 

(^):这个 com.foo.myApp 是什么？ 

I Android 应用包由 Java 风格的完全 
限定包名来标识。这些包名有点像逆 
序的域标记（也就是说，有点诹倒过 
来的 Web 域名） 

⑽一一 


我怎么知识我的应用的包名呢？ 

第8幸中，我们告诉过你如何为 
PhoneGap Build 服务编辑一个 XMLfc 
置 文件，其中就设罝了应用的包名。 

ladb 怎么知道要在哪个设备上安 
装这个应用呢？ 

@ r a db 会在当前正在运行的模拟设 
备上安装或卸栽应用.或者，如果你 
把一个真正的 Android 设备连接到计算 
机的 USB 口，它就会在那个真正的设 
备上安装或卸载应用。 

I 我能从横拟器或设备本身 卸栽一 
个应用吗？ 

答 :可以.可以像真实世界中一样 
卸载应用.进入设备的菜单，找到 
Manage Apps 选项。然后可以找到并刪 
除当前应用。 


I 我安装或卸载应用时得到了一 
个错误。 

在试图安装 APK 之前确保糢拟器 
完全加栽。可以运行命令 adbdevices 来 
查看 abd 知道的设各或模拟器列表。如 
果你的糢拟器或设备在正常运行，应 
该能看到一个相应的项。 

安装或卸载时不能同时运行多个活动 
设备（包括真实设备和模拟设 备）， 
否則 abd 会不知所措。 

最后， 如果一个应用巳经安装，再次 
安装之前必須先卸载这个应用。 

, # 我有一个真正的 Android 设备„ 
怎么安装和卸载应用呢？ 

可以使用同样的命令，不过不用 
启动模拟器，只需要把你的设备插到 
计算机的 USB o 上，运行 adb devices 
命令可以确认 abd 能看到你的设备。 


咍 r 大功告成 f 

g / 对应你的计算机上的操作系统，下栽并安装适当的 
Android SDK . 

安装一些必要的平台工具和一些 Android 平台 （ API 版 
本）. 

[7 f 创建一个 Android 虚拟设备 ( AVD )。 可以在这些模拟器 
上运行 Android 应用。 

0 " 学习如何在模拟器和设备 t 安装和卸载 Android 应用。 




配置 PATH 设置，从而可以更方便地运行 Android 工具。 
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Opera Mini 1!0 

simulator , 仿真器 HI 
Opera Mobile 110 
plug-ins, 插件 45 
redirecting , 重定向 104~109 
Safari NO 

testing cache manifests, 测试缓 存清单 286 
troubleshooting cache manifest, 缓存清单排错 291 
sniffing , 嗅探 116 
support , 支持 

cache manifest , 缓存清申 ■ 2% 
caniuse.com 382 

client-side feature detection, 客户端特性检测 339 
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local Storage 343 
testing, 测试 383 
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XHR 281 
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Make It! submit button. Make It! 提交按钮 276 
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changing, 修改 290 - 296 
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testing. 测试 286,295 
troubleshooting, 排错 289, 291,292-293 
URLs 285 

CACHE section, CACHE 部分 （cache manifest, 缓存消单） 

289. 290 

wildcards, 通配符 296 

callback function, mediaCapture API, 回调函数 ， mediaCapture 
API 349 

cameras , 相机 

mediaCapture API 344 

mobile browser access, 移动浏览器访问 316 
caniuse.com 382 
capabilities , 能力 
groups , 组 

bearer , 承栽 176 
device classes , 设备类 181 
retrieving capability values , 获取能力值 171 
testing devices in device class definitions , 设备类定义中的 
测 试设备 193-198 

WURFL (Wireless Universal Resource FiLc), WURFL (无 
线通用资源 文件 ）170 

creating device classes , 创建设备类 187~ 189,190— 199 
case studies, analyzing audience requirements, 案例研究，分析 
用户需求 146-149 

centers for testing mobile devices ， 测试移动设备的中心 375 
Charles Proxy 65 
charts , 图表 
pie. 饼图 50 
waterfall, 湛布图 48 

analyzing image sizes, 分析图像大小 54 
HAR (HTTPArchive) 49-50 
reading, 读 51 —52 

Chrome 

testing cache manifests, 测试缓存清单 286 
troubleshooting cache manifest, 缓存淸单排错 291 
classes ，类 

device , 设备 151,186 

creating with WURFL capabilities, 用 WURFL 能力创 
建 190—199 
definition of , 定义 180 
desktop , 窠面 186 
grouping capabilities , 分组能力 181 
grouping experiences , 分组体验 183, 184—185 
names , 名字 189 

numbers per project , 每个项 0 编号 189 
PHPAPI 212 — 215 

study aid site (Acedlt! Test Prep site ), 学习辅 助网站 
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(Acedlt! Test Prep site) 201 一 209 
testing, 测试 200,209 
troubleshooting, 排错 198 
click event, click 亊件 277 — 278 
client-side device detection , 客户端设备检澜 150 
client-side feature detection, 客户端特性检测 339 
CMS (content management system), CMS ( 内容管理系统） 
Creature Comforts International , 动物关怀国际组织 
93-95 

mobile devices and, 移动设备 95 
code , 代码 

jQuery Mobile 228-229 
validation, 验 iiE 374 
WURFLPHPAPI 402 
color fields, 赖色域 259-260 
colors, adding with lists, 顔色，用列表增加 258 
color-size field combos, 颜色•大小组分域 

generating arbitrary combos, 生成任意个组合域 276 
removing. 刪除 275 
color-size field pairs, 顏色 - 大小域对 260 
columns , 栏 

converting to fluid layout, 转换为汝式布局 29 
fluid layouts, 流式未局 37 
com.foo.myApp 415 
commands ， ifeonfig ， 命令 ， ifconfig 394 
conditional comments , 条件注样 
Internet Explorer 62 — 63 
media queries. 媒体査询 63 - 65 
config.php 280 

configuration files, creating, ft 置文件,创建 162-168 
connection speed, device support, 连接速度，设备支持 144 
content ,内容 

floating, 浮动 60 

future-friendly manifesto, 未来友好宣言 366 
overlap, 龜彝 83~89 
reordering, 重排序 59 - 60, 65 
semantic markup, 语义知 Ud 57 
content breakpoints. 内容断点 89 

conicnl breaks, media queries, 内容中断，媒体査询 83-88 
content management system (CMS), 内容管理系统 （ CMS) 
Creature Comforts International , 动物关怀国际组织 
93-95 

mobile devices and, 移动设备 95 


content-type, cache manifest and, content-type, 缓存清单 285 

context switching, fluid layouLs, 上下文切换，流式布 At) 
31-32 

Creature Comforts International, 动物关怀国际组织 92 
CMS (content management system). CMS (内容较理系 
统） 93-94,95 
infrastructure, 基础设 施 93 
mobile device detection script, 移动设备柃测脚本 
104-107 

mobile website needs, 移动网 站需求 93 - 94 

CSS 

creating for mobile devices, 为移动设备创述 14-21 
analyzing CSS, 分析 CSS 16-17 
analyzing site siructure. 分析网站结构 15 
converting fixed layouts to fluid layouts , 固定布局转换 
为流式布局 24-30, 34 
identifying changes , 找出改变 18 
mobile magnets, 移动磁貼 19-20 
questions/answers. 问题 / 答案 37 
steps , 步骤 19-23 

updating styles.css file. £ 新 styles.css 文件 22 
viewport <meta> tag, viewport <meta>4i；id 22 
desktop structuial, 桌而结构 21 
hiding JavaScript, 隐藏 JavaScript 53 
images, downloading, 图像，下栽 71 
media features, 媒体特性 12 
media queries , 媒体査询 10-11. 13-14, 37 
media types, 媒体类型 12 〜 14 
mobile devices and, 移动设备 9 
mobile media queries, 移动媒体査询 61 
moving iframe atiributes to, iframe 属性移动到 80 
RWD (Responsive Web Design), RWD ( 响应式 Web 设 
计 ） 38 - 40 

shared structural, 共卓结构 21 
Splendid Walrus website, 非凡海象 M 站 15 - 19 
sre attribute, src 属性 68 
testing, 测试 23 
wireless , 无线 135 
CSS3 217 

CSS Mobile Profile 2.0 (CSS-MP) 127-131 

troublcshootin list numbering , 列表编号排错 132 — 133 
CSS Mobile Profile (CSS-MP) 134 
CSS-MP(CSS Mobile Profile) 134 
CSS-MP (CSS Mobile Profile 2.0) 127-131 

troubleshooting list numbering , 列表编号排银 132 - 133 
css/slyles.css. CACHE section, css/styles.css, CACHE 部分 
(cache manifest, 缓存清单 ）290 
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CustomDevice object, CustomDevice 对象 189 

custom widgets, jQuery Mobile, 定制部件 .jQuery Mobile 275 



DAP (Device APIs Woricing Group) 384 
data , 数据 

future-friendly manifesto, 未来友好宣宫 366 
WURFL (Wireless Universal Resource FiLe), WURFL (无 
线通用资源 文件 ）159 
data-* attribute, data-* 属性 231—232,236 
databases (device), 数据库（设 备） 151,154 
DctectRight 157-158 
DeviceAtlas 157—158 
device support , 设备支持 145 
MobileAware 157 — !58 
Wireless Universal Resource FiLe 参见 WURFL 
data-icon attribute, data-icon 属性 250 
data-inset attribute, data-insetJK 性 233 
data-role attribute, data-role 域性 232 

creating navbars, 创建导航条 249 ~ 250 
datastorage, 数据存储 334 — 338 
localStoragc API 343 

data types, future-friendly manifesto, 数据类型，来来友好官 
言 366 

Debug Bridge •参见 adb 
debugging , 调试 

BlackBcrryOS 381 
BlackBcrry Play book 381 
iWeblnspector 381 
Opera Dragonfly 381 
remote debugging, 远程调试 376 ~ 381 
WebKit 381 
weinre 376 — 381 
dcbug.phonegap.com 377,381 

demographics, device support, 人口统计，设备支持 145 
design, 设计 71,357 

determining which design to use , 确定使用哪个设计 
358-361 

fluid layouts compared to fixed layouts , 流式布局与固定布 
局比较 24-30 

future-friendly manifesto, 未来友好寅言 362 — 363 
flexibility , 灵活性 364 
guidelines for usage, 使用原则 366~370 


Hunt 365 

t responsive, 移动优先响应 56, 57 
converting into mobile-first design, 转换为移动优先设 
计 58-59 

converting Responsive Web Design into, 响应式 Web 设 
l 十转换为 58 

media queries, 煤体査淘 61 
widgets, 部件 79-81 
progressive enhancement, 渐进增强 57,141 
RWD (Responsive Web Design), RWD (响应式 Web 设 
计 ） 1 

context switching, 上下文切换 31—32 
CSS media queries, CSS 媒体资询 10-11. 13 — 14 
fluid layouts, 流式布局 24 — 30 
images , 图像 10—11 
layouts , 布局 10— 11 
media , 媒体 10—11 
desktop device class, 桌面设备类 186 
desktop structural CSS, 桌面结构 CSS 21 
DetectRight 157-158 
Device Anywhere 375 
device APIs 384 

Device APIs Working Group (DAP) 384 

DeviceAtlas I57~ 158 

device classes, 设备类 151,186 

creating with WURFL capabilities, 用 WURFL 能力创建 
187-199 

definition of , 定义 180 
desktop, 桌面 186 
grouping capabilities, 分组能力 181 
grouping experiences, 分组体验 183 〜 185 
names, 名 —189 

numbers per project , 每个项目编号 189 
PHPAPI 212-215 

study aid site mockup (Acedlt! Test Prep site ), 学习辅助模拟 
网站 (Accdh! Test Prep 网站） 201-209 
testing , 测试 193-198, 200,209,213 
troubleshooting , 排错 198 
devicc_classes.php file, device_classcs.php 文件 200 
device databases, 设备数据库 151,154 
device support, 设备支持 145 
Wireless Universal Resource FiLe . 参见 WURFL 
device.php file, device.php 文件 163 〜 169 
adding tests to , 增加测试 177 
deviceready event, deviceready 事件 345 — 346 
devices, 设备 6 
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A List Apart article, A List Apart 文章 374 
CMS (content management system), CMS (内容管理系 
统 ）95 

creating CSS for, 创建 CSS 14 - 21 
analyzing CSS ， 分析 CSS 16—17 
analyzing site structure, 分析 N 站结构 15 
converting fixed layouts to fluid layouts , 固定布局转换 
为流式 : 布局 24-30, 34 
identifying changes , 找出改变 18 
mobile magnets , 移动磁贴 19 〜 20 
questions/answers, 问 题 / 答案 37 
steps , 步嫌 19 — 23 

updating styles.css file, 更新 styles.css 文件 22 
viewport <meta> tag, viewport <meta>^iU 己 22 
detecting with scripts , 用脚本备测 104 — 107 
detection, 检测 97 
emulated , 模拟 

installing in Android SDK, Android SDK 中安装 
407 - 408 

launching ， 启动 409 — 410 
frames , 袖 117 

future-friendly manifesto, 未来友好宣言 366 
higher_mobilc 186 

installing Android SDK, 安装 Android SDK 329 
native applications, 原生应用 316 
remote testing, 远程测试 375 

RWD (Responsive Web Design), converting fixed layouts to 
fluid layouts, RWD ( 响应式 Web 设 计）， 固定布局 
转换为流式布局 24-30 
scrolling on , 浓动 119 — 125 
sharing , 共享 374 
simpler.mobile 186 
support ,支持 137, 139 
analytics , 分析 145 

audience considerations , 用户考虑 142—145 

browser features, 浏览器特性 144 

browsers , 浏览器 140 

connection speed , 连接速度 144 

customer considerations, 客户考虑 150 

demographics , 人 口统计 145 

determining criteria/priorities , 确 定准則/优先级 138 

geographic trends , 地 理趋势 145 

hardware performance , 硬件性能 144 

jQuery Mobile 245 

progressive enhancement, 渐进增强 141 
questions to ask , 要问的问题 142 — 143 
services , 服务 144 
stakeholders , 投资人 144 
unsupported devices , 不支持的设备 140 - 141 
targets , 目知 117 
testing , 测试 139,374 ~375 


WURFL (Wireless Universal Resource FiLe), WURFL (无 
线通用资源文件） 
instantiating ,实例化 172 
devices databases , 设备数据库 
DetectRight 157-158 
DeviceAtlas 157 ~ 158 
Mobile Aware 157—158 

WURFL (Wireless Universal Resource FiLe)» WURFL (无 
线通用资源 文件） 
capabilities , 能力 156 — 157 
dialogs, jQuery Mobile, 对话框 ， jQuery Mobile 306 
disabling scaling, 禁用缩放 73 
div#main content, div#main 内容 37 
div#points content, div#points 内容 37 
<div> tag, 记 75 

adding links, 增加链接 75-76 
DOCTYPE. definition of, DOCTYPE , 定义 116 

DOCTYPEs (HTML5), converting to XHTML-Mobile 

Profile, DOCTYPEs (HTML5>, 转换为 XHTML-Mobilc 
Profile 114-115 

document type declarations (DTDs), 文档类型声明 （ DDT) 

116 

domains, determining where files come from, 域，确定文件来 
自哪里 52 

downloading ， 下栽 

AncLx>id package (APK), Android 包 (APK) 328 
Android SDK (software development kit)，Android SDK ( 
软件开发包 ）404 
CSS images, CSSffi 像 71 
images, media queries, 图像，媒体査询 66 
resources, waterfall charts, 资源，潘布图 48~50 
WURFL PHP API 398 
XAMPP 390 

XML data file, XML 数据文件 399 
DTDs (document type declarations), DTD ( 文档类型声明） 

116 



ECMAScript Mobile Profile 135-136 
EDGE network, 4G phones, EDGE 网络， 4G 手机 65 
em-based fonts, sizes, 基于 em 的字体，大小 37 
emulated devices (Android), 模拟设备 (Android) 

adding to Android SDK ，增加到 Android SDK 407 — 408 
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launching, 启动 409 — 410 
emulators , 換拟器 374 

installing Android SDK, 安装 Android SDK 329 
en-us 103 

cvcnt_list.inc file, event_list.inc 文件 309 
events, 事件 

change 277~278 
click 277-278 
deviceready 345 — 346 
JavaScript 365 
pagecreate 275, 277 — 278 
pageinit 275, 277-278 
.ready 275 
Tartanator 271 — 272 

Events page,Tartanator, Events 页面，花格布爱好者应用 
271-272 

explore page, 资源管理页面 

creating ScientiaMobile, 创建 ScientiaMobile 160— 166 
testing, 测试 169 

expressions (regular), mobile device detection script , 表达式 
(正則），移动设备检测脚本 107 
extensions, Google Chrome, 扩展， Google Chronic 85 



facebookextemalhit user agent, facebookextemalhit 用户代理 
213 

FALLBACK section, FALLBACK 部分 （cache manifest, 缓存 
淸单 ）296 

feature phones compared to smartphones, 功能手机与智能手机 
对比 113,120 

fields, 

adding to forms, 增加到表电 257 
color-size field pairs, 颜色-大小域对 260 
size, 大小 260 
xhtml_make_phonc_cal!_string 176 
files, 文件 

app.js 336-352 

testing, 测试 353 - 355 
build.php 281 
config.php 280 

configuration,creating , fid S ， 创建 162—168 
determining type, 确定类型 52 
device_classes.php 200 

device.php, adding tests to , device.php , 增加测试 177 


evenMistinc 309 
gcnerate.php 280,281 

.htaccess, creating cache manifest, .htaccess, 创建缓存清单 " 
287-288 
image.php 280 

index.html. Splendid Walrus websile, index.html, 非凡海象 
网站 15 

index_mobile_.html, converting to XHTML-Mobile 

Profile, index_mobUe_.html ， 转换为 XHTML-Mobile 
Profile 114—118 
index.php 209 
index_so!ution.php 209 
listphp 282 
redirect.php 106 
sizes, 大小 52 

HAR Viewer page pie charts, HAR Viewer 页面饼图 
50-51 
styles.css 

Splendid Walrus, 非凡海象网站 16 
testing, 试 133—134 
updating, 更新 22 
(artans.html 240 
tartans.php 282 
XML data, XML 数据 397 
downloading, 下栽 399 

filesystem access, WURFL PHP API, 文件系统访问 ， WURFL 
PHP API 401 

filters, list, 过滤器，列表 244 — 249 
Find Events page, 査找亊件页面 
geolocation, 地理定位 301,309 
JavaScript 301 
Firebug 65 

Firefox, troubleshooting cache manifest, Firefox , 缓存淸单排 
错 291 

Firtman, Maximiliano 381 
fixed layouts, 固定布局 

compared to fluid layouts, 与流式布局对比 24 ~ 30 
disadvantages of, 缺点 26 
Flexbox 65 

flexibility, future-friendly manifesto, 灵活性，未来友好宣言 
364 

Flexible Box Module 65 
floating content, 浮动内容 60 
fluid images, 流式围像 33,54 
fluid layouts, 流式布局 
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advantages of, 优点 27 — 28 
columns, 栏 37 

compared to fixed layouts, 与固定布局对比 24~ 30 
context switching, I ■• 下文切换 31-32 
images ， 图像 33 
fluid media, 流式媒体 35,36 
fonts 

jQucry Mobile 230-231 
sizes 35 

em-based 37 

footers 

jQuery Mobile 237 — 239 
swatch c 239 

toolbars, adding to headers/footers with jQucry Mobile , 工 
具条，用 jQuery Mobile 增加到页眉 / 页脚 249-252 
forms ， 表单 

geolocation , 地理定位 301 — 308 
HTML5 256-257 

adding buttons to headers ，向页柄增加按钮 262 ~ 263 

adding fields, 增加域 257 

color fields, 频色域 259 - 260 

color-size field pairs, 额色 - 大小域对 260 

lists within lists, 列表中的列表 258 

testing, 测试 263 

super mobile web app enhancements, 超级移动 Web 应用增 
强 274-277 

Tartanator, 花格布爱好者应用 253 — 261 
frames , mobile devices and, 倾，移动设备 117 

frameworks (mobile web apps), 框架（移动 Web 应用〉 217, 
225 

disadvantages, 缺点 225 
jQuery Mobile 

adding footer toolbars ，增加页脚下 . 具条 249 — 250 
animation , 动 eO 245 
code components, 代码组件 228 — 229 
creatingTartanatorpage . 创建花格布爱好者应用页面 
228-239 

creating tartans, 创建花格布 240 — 245 

custom widgets , 定制部件 275 

data-* attribute , data-* 属性 231 ~ 232, 236 

device support , 设备支持 245 

dialogs, 命话框 306 

events , 事件 275 

footers , 页脚 237 — 239 

linking, 链接 234 

list dividers, 列在分割条 244 

list filters, 列表过滤器 244 

listviews 233 


loading Web pages, 加载 Web 奴面 235 
PhoncGap Build projects, PhoneGap Build 项自 
324-327 
functions . 函数 
addColoit) 277 
buildAddButton() 277 
callback, mediaCapture API 349 
initDevice 339 
initPhoneGap 347 
matching, 匹 id 191 

testing capabilities , 测试能力 193—198 
onColorListChangc() 277 
onStitchSizeChange() 277 — 278 
refreshTartans 352 
setColorSelectStyle() 277 
styleColorListltemO 277 — 278 
switch. 切换 192 
tartanFound 348. 350, 351 

future-friendly manifesto, 未来友好宣言 362 — 363 
flexibility, 灵活性 364 
guidelines for usage, 使用原则 366~370 
Tartan Hunt 365 



generate, php 280, 281 

geographic trends, device support, 地理 趋势 . 设备支持 145 
geolocation, 地理定位 267,270, 298 -309 
browser support, 湖览器支持 303 - 308 
Find Events page, 査找寧件页面 301,309 
forms, 表单 301-308 
JavaScript 300, 302 

World Wide Web Consortium (W3C) Geolocation API 298 
getCapability method, getCapability 方法 171 
getCurrentPosition method, getCurrentPosition 方法 299 

getDeviceForUserAgent method, getDcviceForUserAgent 方法 
164. 172 

Global Corp 147 - 150, 149-150 

global positioning system (GPS), 全球定位系统 (GPS) 298 
Google Chrome 85 
Google Gears 306 

Google Maps iframe code ， Google Maps iframe 代码 
adding with JavaScript, 用 JavaScript 增加 74 — 78 
moving attributes to CSS, 属性移动到 CSS 80 
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scaling maps, 缩放地图 82 
troubleshooting widgets, 部件排错 79 — 81 
using media queries for content breaks , 对内容中断使用媒 
体査询 83-88 

GPS (global positioning system), GPS ( 全球定位系统 ） 298 
gradients, jQuery Mobile, 梯度 ， jQuery Mobile 230 - 231 
graphics, fluid, ftl 像，流式 33 
graphics libraries , 图像库 141 
groups ， 组 

capability ， 能力 
bearer , 承载 176 
device classes , 设备类 181 
retrieving capability values , 获取能力值 171 
Guda, Krishna 158 



hardware performance, device support, 硬件性能，设备支持 
144 

HAR (HTTPArchive) 49-50 

HAR Viewer page Show Statistics link.HAR Viewei •页面 Show 
Statistics 链接 50 

has_cellular_radiocapability, has_cellular_radio 能力 176 
haz.io 383 
headers , 页眉 

adding buttons to, 增加按钮到 262-263 
fixing in position, 位置固定 251 — 252 
user agent . 参见 user agents , 用户代理 
Head First HTML5 Programming 224 
hiding JavaScript, 隐藏 JavaScript 53 
higher_mobilcdevices, higher_mobile 设备 186 

horizontal layouts compared to vertical , 水平布局与垂直布局 
对比 29 

.htacccss files, creating cache manifests, .hlaccess 文件，创建缓 
存淸单 287-288 

HTML 

requests for HTML pages, HTML 页面请求 
traditional Web, 传统网站 220 
WebApps ， Web 应用 221 
semantic markup, 语义标 id 57 
Splendid Walrus website , 作凡海象网站 15—19 
weinre.html 377 
HTML5 217,218 


application stores ， 应用商店 385 
cache manifest ，缓存淸申 - 
creating ， 创建 285 — 296 
definition, 定义 284 

compared to XHTML-Mobile Profile ， ^JXHTML-Mobile 
Profile 对比 115 〜 116 
data-* attribute, data-* 属性 231 — 232 
data-role attribute, data-role 属性 232 
definition of, 定义 219 
forms, 表单 256-257 

adding buttons to headers, 增加按 钮到员 •酒 262 ~ 263 
g fields, 增加域 257 
fields. 颜色域 259-260 
color-size field pairs, 颜色-大小域对 260 
lists within lists, 列表中的列表 258 
testing, 测试 263 
local Storage API 333 
PhoneGap •参见 PhoneGap 
Webapps ， Web 应用 219 
html5test.com 383 
HTTP Archive (HAR) 49-50 
hybrid applications, 混合型应用 313,317 
browser support, 湖览器支持 339 
creating, 创建 322-332 

app.js file, app.js 文件 336 — 352 
datastorage, 数据存储 334-338 
mediaCapture 348 — 353 
pictures/media, 图片 / 媒体 345 — 349 
PhoneGap •参见 PhoneGap 
refreshing pages, 刷新豇面 340 
tools, 工具 320 
uninstalling, 卸栽 332 


ifeonfig command, ifeonfig 命令 394 

iframe code, YouTube videos, iframe 代码， YouTube 视頻 35 

IIS Manager 393 

image.php 280 

images , 阁像 

CSS, downloading, CSS ， 下载 71 
fluid, 流式 33, 54 
media queries, 媒体査询 66 
offline mode. 离线模式 290 -296 
optimization, 优化 67. 69 
overlap, 重番 83 — 89 
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RWD (Responsive Web Design), RWD ( 响应式 Web 设 
计〉 10-11 
scaling, 缩放 68 - 69 
Sencha.io Src 69,71 
sizes, 大小 50, 52, 54 

src attribute, src 属性 68 — 69 
I’ m Freaking Out page ， I’ m Freaking Out 页面 152 
testing , 测试 174 
<img> tag, <img> 标记 71 

src attribute T src 域性 68 — 69 
@import syntax, @import 语法 37 

index.html file, Spendid Walrus website, index.html 文件，非凡 
海象网站 15 

index_mobile_.html file, index_mobile_.html 文件 

converting to XHTML-Mobile Profile, 转换为 XHTML- 
Mobile Profile 114-118 
index.php file ， index.php 文件 209 
index.solution.php file, index_solution.php 文件 209 
initDevice function, initDevice 函数 339 
initPhoneGap function, initPhoneGap 函数 347 
installing , 安装 

Android apps with adb, 利用 abd 安装 Android 应用 
411-413,415 

Android platforms, Android 平台 405 — 406 
Android SDK 320, 329,404 
Android tools, Android 工具 405 〜 406 
bookmarklets 85 
MAMP 392-393 
Tartan Hunt 329 ~ 332 
instantiating , 实例化 

WURFL (Wireless Universal Resource FiLe) 

devices, WURFL ( 无线通用资源文件）设备 172 
WURFL (Wireless Universal Resource FiLe) 

objects, WURFL ( 无线通用资灝文件）对象 163 
interfaces ,接口 6 
Internet Explorer 

conditional comments« 条件注释 62 
media queries, 媒体査拘 65 
mobile media queries, 移动媒体査询 62 - 65 
testing media queries in, 测试媒体査询 61 —64 
Internet Explorer 9 application cache, Internet Explorer 9 应用 
缓存 284 

iOS Developer program, iOS Developer 程序 319 
IP addresses, IP 地址 394 


iPhones 2 

iPod Touch, testing device.php changes, iPod Touch, 测试 device, 
php 改变 179 

is_wirclcss_dcvice capability, is_wireless_devicc 能力 172 
iWeblnspecior, debugging, iWeblnspector, 调试 381 



JavaScript 217,219 

adding Google Maps iframe code, 增加 Google Maps iframe 
代码 74-78 

adding to On Tap Now page, 增加到 On Tap Now 页面 
77-78 

cache manifest, 缓存清单 295 
creating media queries, 创达媒体査询 76 
deviceready event, deviceready 亊件 345 — 346 
events, 事件 365 

Find Events page, 査找事件页面 301 
geolocation, 地理定位 300 - 308 
hiding, 隐藏 53 
image sizes, 图像大小 50 
localStorage API 333 
PhoneGap 319 

refreshing pages, 刷新页面 340 
removing attributes from , 从中 W 除属性 81 
Tartanator page enhancements , 花格布爱好者应用页面增 
强 274-279 

JavaScript API, PhoneGap 345 — 349 

JavaScript magnets, localStorage API, JavaScript 磁贴， 
localStorage API 336 — 338 

jQuery Core 229-230 
jQuery Mobile 

adding footer toolbars, 增加页脚工具条 249 -250 
animation , 动画 245 
code components, 代码组件 228 ~ 229 
creating Tartanator page , 创建花格布爱好者应用页面 
228-239 

creating tartans, 创建花格布 240 〜 245 

custom widgets , 定制部件 275 

data-* attribute, data-* 属性 231 — 232, 236 

device suppoit, 设备支持 245 

dialogs, 对话框 306 

events, 事件 275 

footers, 页脚 237-239 

linking, 链接 234 

list dividers, 列表分割条 244 
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list filters, 列表过滤器 244 
listviews 233 

loading pages, 加载页面 235 

PhoneGap Build projects, PhoneGap Build 项目 324 — 327 

K 

Kamerman, Steve 158 

keys, local Storage API ，键 ， localStorage API 343 
Koch, Pcter-Paul (PPK) 189,374 



launching emulated devices (Android), 启动模拟设备 (Android) 
409 - 410 

layouts, 布局 

content breaks, 内容中断 83-88 
fixed, disadvantages, 固定，缺点 26 
fluid , 流式 

advantages of, 优点 27 — 28 
columns, 栏 37 

compared to fixed layouts v 与固定布局对比 24 — 30 
context switching, 上下 文切换 31 — 32 
images, 图像 33 

horizontal compared to vertical, 水平与垂直布局对比 29 
RWD (Responsive Web Design), RWD (响应式 Web 设 
计） 10-11 

Splendid Walrus website, 非凡海象网站 15 
linking jQuery Mobile 234 
links, 链接 

adding, 增加 75 — 76 
making calls with , 调用 176 
Linux 

local Web server setup, 本地 Web 服务器建立 390 — 391 
ports , 端口 393 

list dividers, 列表分割条 244 - 249 
list filters, 列表过滤器 244 -249 
list numbering, troubleshooting , 列表编号排错 132~133 
Iist.php file, listphp 文件 282 
lists, adding colors, 列丧，增加颜色 258 
listviews. jQuery Mobile 233 
loading Web pages ， 加载 Web 页面 
AJAX 236 
jQuery Mobile 235 


localStorage API 296, 333 — 338 

browser support, 浏览器支持 343 

client-side feature detection, 客户端特性检测 339 

datastorage , 数据存储 343 

JavaScript magnets, JavaScript 磁贴 336-338 

keys, 键 343 

toggle methods, toggle 方法 341 — 342 
updating refreshTartans function, 更新 refreshTartans 函数 
352 

local Web server setup, 本地 Web 服务器途立 387 - 396 
accessing servers , 访问服务器 394 - 395 
Apachefriends.org 390 — 391 
Linux 390-39! 

Macintoshes 392 — 393 
PHP 390-393 
ports, 端口 393 
Windows 390-391 
XAMPP 390-391 
Loch Air sponsorship 314 

Tartan Hunt 参见 Tartan Hunt 
logical grouping, 逻辑分组 183 

M 

Macintoshes 

installing/uninstalling Android apps, 安装 / 卸栽 Android 应 
m 4i3 

local Web server setup, 本地 Web 服务器建立 392~393 
ports, 端 U 393 

iroubleshooling XAMPF, XAMPP 排错 395 
magnets (JavaScript), localStorage API, 磁貼 (JavaScript), 
localStorage API 336 - 338 

magnets (mobile CSS), creating CSS for mobile devices, 磁貼 
(mobileCSS ), 为移动设备创逮 CSS 19 - 20 

Make It! submit button. Make It! 提交按钮 276 
MAMP 395 

filesystem access, 文件系统访问 401 
installing, 安装 392-393 
manifest attribute, manifest 属性 285,286 
maps , 地图 

adding Google Maps ifirame code with JavaScript , 用 JavaS- 
cript 增加 Google Maps iframe 代码 74 〜 78 
content breaks , 内容中断 83 — 88 
hiding. 隐藏 53 
scaling, 缩放 82 
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Marcotte. Ethan 10 

margins, converting to fluid layout, 页边距，转换为流式布 
局 29 

Markup validation, 标 I 己验证 117 
access keys , 访问键 123 

matchers, WURFL (Wireless Universal Resource FiLe ), 匹配函 
数 ， WURFL ( 无线通用资源文件 ）159 
matches, PHPAPI, PCgd, PHPAPI 212-215 
matching function, PCJii 函数 191 

testing capabilities ，测试能力 193 — 198 
maximum-scale setting, maxi mum-scale 设 S 73 
media, 媒体 

fluid, 流式 35, 36 

RWD (Responsive Web Design) t RWD ( 响应式 Web 设 
计） 10-11 
Tartan Hunt 345-349 

YouTube videos, iframe code ， YouTube 视频， iframe 代 
码 35 

mediaCapture API 344, 348 〜 353 
cameras, 相机 344 
media features, 媒体特性 12 
media queries, 媒体査询 65 

conditional comments, 条件注释 63 — 65 
content breaks , 内容中断 83 - 88 
creating in JavaScript, JavaScript 中创建 76 
images, 图像 66 
Internet Explorer 62 — 65,65 

mobile-first Responsive Web Design, 移动优先 _ 应式 Web 
设计 61 

testing in Internet Explorer, Internet Explorer 中澜试 61 
— 64 

media queries (CSS), 媒体査询 (CSS) 10-11, 13-14, 37 
media types, 媒体类型 
CSS 12-14 

@import syntax, @import 语法 37 
metadata form fields, adding to forms, 元数据表 申域， 增加到 
表竽 257 

methods ,方法 

gctCapabiiity 171 
getCurrentPosition 299 
getDc viceForU ser Agent 164, 172 
localStorage API 335 
toggle 341—342 
toggleClass 341 〜 342 


Mo Better Museums 146 — 149, 148 — 150 
Mobile Aware 157—158 
mobile browsers , 移动浏览器 
Ajax 281 

camera access, 相机访问 316 
downloading CSS images, 下栽 CSSftl 像 71 
installing bookmark lets , 安装 bookmark lets 85 
linking phone numbers , 链接电话号码 178 
markup validation , 标记验证 117 
Opera Mini 110 

simulator , 仿真器 111 
Opera Mobile 110 
plug-ins, 插件 45 
redirecting , 重定向 104~ 109 
Safari 110 
sniffing , 嗅探 116 

support, client-sidc feature detection, 支持，客户端特性检 
测 339 

user agents, 用户代理 98 - 103. 102 — 103 
XHR 281 

XHTML-Mobilc Profile 116 

mobile CSS magnets, creating CSS for mobile devices, mobile 
CSS 磁貼，为移动设备创建 CSS 19-20 

mobile design 参见 design 
mobile devices , 移动设备 

A List Apart article, A List Apart 文章 374 
centers for testing mobile devices ，测试移动设备的中心 
375 

CMS (content management system), CMS (内容管理系 
统 ）95 

creating CSS for, 创建 CSS 14-21 
analyzing CSS, 分析 CSS 16 — 17 
analyzing site structure , 分析网站结构 15—16 
converting fixed layouts to fluid layouts , 固定布局转换 
为流式布局 24 ~ 30, 34 
identifying changes ,找出改变 18 
mobile magnets ,移动磁贴 19-20 
questions/answers ， 问题 / 答案 37 
steps , 步骤 19-23 

updating styles.css file, 更新 styles.css 文件 22 
viewport <meta> tag，viewport <meta> 标记 22 
CSS and 9 

detecting with scripts , 用脚本检测 104 — 107 
detection, 检测 97 
frames , 械 117 

future-friendly manifesto, 未来友好宣自 • 366 
native applications, 原生应用 316 
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RWD (Responsive Web Design), converting fixed layouts to 
fluid layouts, RWD (响应式 Web 设 计）， 固定布局 
转换为流式布局 24-30 
scrolling on, 滚动丨 19~125 
sharing , 共享 374 
sizes, 大小 6 

support •参见 devices, support 
targets, 目标 117 
testing, 测试 374-375 
mobile emulators, 移动模拟器 374 

mobile-first Responsive Web Design, 移动优先响应式 Web 设 
计 56, 57,71 

converting Responsive Web Design into, 响应式 Web 设计 
转换为 58 

media queries, 媒体査询 61 
widgets, 部件 79 — 81 
mobile frameworks, 移动框架 217,225 
disadvantages, 缺点 225 
jQuery Mobile 

adding footer toolbars, 增 加页脚 条 249 - 250 
animation, 动画 245 
code components, 代码组件 228 ~ 229 
creatingTartanator page, & 建花格布爱好者应用页面 
228-239 

creating tartans , 创逮花格布 240 — 245 

custom widgets, 定制部件 275 

data-* attribute, data-* 厲性 231 —232, 236 

device support, 设备支持 245 

dialogs, A ■话框 306 

events, 事件 275 

footers, 页脚 237-239 

linking, 链接 234 

list dividers, 列表分割条 244 

listfiltere, 列表过滤器 244 

listviews 233 

loading Web pages, 加载 Web 页面 235 
PhoneGap Build projects, PhoneGap Build 项目 
324-327 

mobile interfaces, 移动界面 6 
Mobile Perf Bookmarklet 65 

mobile performance tests, Mobitest, 移动性能测试， Mobitest 
47 - 53 

mobile phones, 移动手机 2 
iPhones 2 

viewing websites on, 査看网站 4 — 7 
Web browsers, Web 浏览器 3 
Web usage, Web 使用 3 


mobile simulators, 移动仿真器 374 

mobile sites, CSS-MP (CSS Mobile Profile 2.0) ， 移动网 
站， CSS-MP (CSS Mobile Profile 2.0) 127 

mobile Web apps, 移动 Web 应用 217,218 
definition of, 定义 219 

frameworks (mobile Web apps), jQuery Mobile, 框架（移 
动 Web 应用 } .jQuery Mobile 228 - 239 
geolocation, 地理定位 267,270 
HTML5 219 

mobile frameworks, 移动框架 217,225 
disadvantages, 缺点 225 

offline mode , 离线模式 267, 267 -268, 270, 284-296 
progressive enhancement, 渐进增强 267,270 
requests for HTML pages, HTML 负面 请求 221 
Tartans Unlimited project, Tartans Unlimited 项目 
description of, 描述 222 — 225 
mobile Web browsers, 移动 web 浏览器 6 
mobile websites, 移动 N 站 104 

Acedli! Test Prep standalone website plans, Acedlt! Test 
Prep 独立 M 站计划 182 

mobile device detection script, 移动设备检测脚本 
104-107 

mockups, 携拟网站 108-112 
single sites, 单独 的网站 

Creature Comforts International needs, 动物关怀 [U 际 
组织需求 93 

sending mobile users to, 将移动用户指向 ％ 
user agents, 用户代理 98- 103 
testing, 测试 109 
user agents, 用户代理 

mobile browsers, 移动浏览器 102—103 
sniffing, 喚探 97. 101 
strings, 字符串 98~99 
Mobitest 47~53 

test result variations, 测试结果变化 65 
mockups, 模拟网站 

single sites, 单独的网站 108 — 112 
study aid site (Acedlt! Test Prep site), 学利辅助网站 
(Acedlt! Test Prep 网站） 
device classes, 设备类 201—209 
modcmizr.com 383 
Mueller, Patrick 376 

N 

names, device classes, 名字，设备类 189 
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native applications, 原生应用 246 — 253, 313 
device capabilities, 设备能力 316 
PhoneGap. 参见 PhoneGap 
navbars, creating, 导航条，创迷 249 — 252 
networks , 网络 

EDGE. 4G phones, EDGE.4G 手机 65 
WiFi, Web requests, WiFi,Web 请求 45 
NETWORK section, NETWORK 部分 （cache manifest, 缓存 
淸单 ) ， wildcards, 通配符 289, 291, 296 

Nitobi 318 


open source licensing, 开源许可 

AG PL (Affero General Public License v3) 158 
WURFL (Wireless Universal Resource FiLc), WURFL (无 
线通用资源 文件） 158 
Opera Dragonfly 65,381 
Opera Mini 110 

application cache, 应用缓存 284 
simulator, 仿真器 111 
Opera Mini 4.2 120 
Opera Mobile 110 



objects, 对象 

CustomDevice 189 
window.applicationCache 294 

WURFL (Wireless Universal Resource FiLc), WURFL (无 
线通用资源 文件） 
instantiating, 实例化 163 
offline mode, 离线換式 267, 270 

cache manifest, 缓存淸单 - 285~296 
browser support, 浏览器支持 2% 
changing resource list, 修改资源列表 290-296 
content-type 285 
definition, 定义 284 

FALLBACK section, FALLBACK 部分 296 

.htaccess files, .hiaccess 文件 287 

syntax, 语法 285 

testing, 獄 295 

troubleshooting, 排错 292 — 293 

URLs 285 

WebKit Web Inspector 286 
images. 图像 290 - 296 

Tananator enhancements, 花格布爱好者应用增强 
284-296 

Web pages, Web 苡面 290-296 
onColorListChangeO function, onColorListChangeO 函数 277 

onStitchSizeChange() function, onStilchSizeChangeO 函数 
277-278 


On Tap Now page, On Tap Now 页面 

adding JavaScript, 增加 JavaScript 77 〜 78 
hiding map, 隐藏地图 53 
optimization issues, 优化问题 44 — 47,70 


reordering content, 内容重排序 59 — 60 
structure, 结构 58~59 


testing with Mobitest, 用 Mobitest 测试 47 — 53 


optimization, 优化 43.44 — 47 
images, 图像 67,69 

On Tap Now page. On Tap Now 页面 44 〜 47, 70 
ordering content ， 内容排序 59 〜 60, 65 
overflow: scroll property, overflow: scrollM 性 131 
overlapping content, 重叠内容 83 — 89 



<p> ug, adding links, 记，增加链接 75 — 76 

pagecreate event, pagccreate 亊件 275, 277 - 278 
pageinit event, pageinit 亊件 275,277 - 278 
panic button . 参见 red panic button, 紧急按钮 
Passani, Luca 158 

patches, WURFL (Wireless Universal Resource FiLc>, 补 
丁， WURFL ( 无线通用资源文件 ） 213 
Perfecto 375 
performance, 性能 

4G phones, 4G 手机 65 

hardware, device support, 硬件，设备支持 144 
performance tests, Mobitest, 性能测试, Mobitesi 47 — 53 

phone calls, making calls with links ， 手机拨号，用链接拨号 
176 

PhoneGap 318-321,364 
Android 319 

downloading APK (Android package ), 下载 
APK (Android 包 ） 328 

creating hybrid applications, 创建混合型应用 322 -327 
deviceready event’ dcviccready 事件 345 — 346 
JavaScript API 345 — 349 
mediaCaplure API 344. 348 — 353 
page initialization, 豇面初始化 365 
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platforms , 平台 320 
removing references. W 除引用 365 
PhoneGap Build 318, 320. 321 

creating Android native apps, 创建 Android 原生应用 
322-327 

downloading APK (Android package), 下栽 APK (Android 
包 ）328 

phonegap.js 344 — 346 
uninstalling apps. 卸栽应用 332 
phonegap.js 344 — 346 
PhoneGap weinre 376 — 381 

phone numbers, linking to mobile browsers, 电话号码，链接到 
移动浏览器 〖78 
photos 参见 pictures 
PHP 

adding field groups ， 增加域组 258 
creating cache manifest , 创建缓存清单 
generating files ， 生成文件 287 — 289 
resource list changes, 资源列表改变 290 - 296 
local web server setup, 本地 web 服务器建立 390~393 
testing, 测试 396 

testing device capabilities in device class definitions , 测试 
设备类定义中的能力 193 〜 198 
PHP API 156 

capability values , 能力值 173 
matches , 匹 ft 212 — 215 

RIS matching (reduction-in-string), RIS 匹配（串内归约） 
159 

pictures. Tartan Hunt ， 阳片 ， Tartan Hunt 345 — 349 
pie charts, 饼图 30 
platforms , 平台 

Android 405 — 406 
PhoneGap 320 
plug-ins, 插件 45 

ports, local Web server setup ， 端口，本地 Web 服务器達立 393 

prioritization, testing mobile devices, 指定优先级，测试移动 
设备 375 

programming, server-side , 编程，服务器端 9 
progressive enhancement , 渐进增强 55, 57, 267, 270. 364 
device support , 设备支持 141 
properties, overflow: scroll , 厲性， overflow: scroll 131 

prototypes, Tartanator, 原型，花格布爱好者应用 224. 

253 -261 


proxy servers , 代理服务器 
Charles Proxy 65 
Web requests, Web 请求 45 — 46 

ft 

queries, media, 充掏，媒体 65 

conditional comments, 条件注释 63 - 65 
content breaks, 内容中断 83 — 88 
creating in JavaScript, JavaScript 中创逮 76 
images, 图像 66 
Internet Explorer 62 — 65 

mobile-first Responsive Web Design, 移动优先响应式 Web 
设计 61 

quirksmode.org 382 

R 

reading waterfall charts, 读湛布图 51 ~52 
.ready event, .rtady 事件 275 

redirecting mobile browsers , 重定向移动湖览器 104—109 
redirect.php file, redirect.php 文件 106 
red panic button , 紧急按钮 

Accdlt! Test Prep website, Acedlt! Test Prep 网站 153 
testing , 测试 174—175 
refreshTartans function, refreshTarians 函数 352 

regular expressions, mobile device detection script , 正則表达 
式，移动设备检测脚本 107 
remote debugging t 远程调试 376—381 
remote devices, testing, 远程设备，测试 375 

removing attributes from JavaScript, 从 JavaScript 中 _ 除属性 
81 

reordering, 重排序，参见 ordering content 
requests for web pages, Web 页面请求 
asynchronous requests, 异步请求 221 
traditional website behavior, 传统网站行为 220 
resource path. WURFL PHP API, 资源路径 , WURFL PHP API 
402 

resources, 资源 

cache manifest, listing, 缓存清单，列出 289 
changing in cache manifest, 缓存清单中修改 290 — 296 
downloading waterfall charts ，下栽潘布阁 48.49 — 50 
Responsive Design and Server-Side components (RESS ), 响应 
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式设计和服务器端组件 （ RESS) 386 

Responsive Web Design (RWD), 响应戌 Web 设计 （ RWD> 1, 
10-11,41 

context switching, 上下文切换 31—32 
converting fixed layouts to fluid layouts , 固定布局转换为 
流式布局 24 - 30 

CSS media queries, CSS 媒体査淘 10- 11 ， 13- 14 

final CSS file analysis, 最终的 CSS 文件分析 38-40 

fluid layouts, 流式布局 24 — 30 

fluid media, 流式媒体 35, 36 

images , 图像 10- II 

layouts ,布局 10 〜 11 

media , 媒体 I0~ 11 

RESS (Responsive Design and Server-Side components), 

RESS ( 响应式设计和服务器端组件 > 386 
Rieger, Bryan 386 
Rieger, Stephanie 386 

R1S (reduction-in-string) matching, PHPAPI, RIS ( 串中）匹 
S 己 ， PHPAPI 159 

RWD (Responsive Web Design), RWD ( 响应式 Web 设计） 1 ， 
10-11,41 

context switching, 上下文切换 31—32 
converting fixed layouts to fluid layouts , 固定布局转换为 
流式布局 24-30 

CSS media queries, CSS 媒体査询 10-11, 13-14 

final CSS file analysis, 最终的 CSS 文件分析 38 - 40 

fluid layouts, 流 ; 布局 24 - 30 

fluid media, 流式媒体 35, 36 

images , 图像 10—11 

layouts ,布局 10~ 11 

media , 媒体 10-11 
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testing cache manifests, 测 K 缓存淸申 - 286 
testing strings , 测试字符串 189 
troubleshooting cache manifest, 缓存淸单排错 291 
scaling , 缩放 

disabling, 禁用 73 

Google Map maps, oogle Map 地图 82 

images, 图像 68 — 69 

viewport <meta> tag, viewport 72 

ScientiaMobile Explorer 155,158 
APIs 158 

creating explore page , 创建资源管理页面 160—166,169 


testing explore page, 测试资源管理页面 I 69 

scripts, mobile device detection, 脚本，移动设备检测 
104-107 

<script> tag, <script>4iHci 377 

scrolling access key attributes , 滚动访问键属性 119, 123 — 125 

SDKs (software development kits). Android, SDKs (软件开发 
fe). Android 319,403 
adb 411 〜 413,415 

adding emulated devices, 增加模拟设备 407-408 
downloading, 下 • 载 404 
installing, 安装 320, 329,404 
launching emulated devices, 启动模拟设备 409 — 410 
platforms/tools, 平台 / 工具 405 — 406 
semantic markup, 语义标记 57, 364 
Sencha.io Src 69, 71,364 
servers , 服务器 
proxy , 代理 

Charles Proxy 65 
Web requests, Web 请求 45 — 46 
weinre 377-379 

server-side device detection , 服务器端设备检测 150 
server-side programming, 眼务器端编程 9 
services, device support, 服务，设备支抟 144 
setColorSelectStyle function, setColorSelectStyle 函数 277 

SGML (Standard Generalized Markup Language)，SGML (标 
准通用标记语言 > 116 

shared structural CSS. 共享结构 CSS 21 
sharing devices, 共享设备 374 

Show Statistics link (HAR Viewer page), Show Statistics 链接 
(HAR Viewer 页面 ）50 

simpler—mobile devices ， simpler 一 mobile 设备 186 

simulators, 仿真器 374 

single sites, 单独的网站 93, 104 

Acedlt! Test Prep standalone website plans, Acedlt! Test 
Prep 独立网站计划 182 
CSS-MP (CSS Mobile Profile 2.0) 127 
mobile device detection script , 移动设备检测脚本 104 
~107 

mockups, 模拟网站 108-112 

scrolling on mobile devices , 移动设备上滚动 119 — 125 
sending mobile users to , 将移动用户指向 ％ 
testing , 测试 109 
user agents, 用户代理 98 — 103 

mobile browsers , 移动浏览器 K)2 ~ 103 
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sniffing. 嗅探 97, 101 
strings, 字符串 98— 100 
size field, 大小域 260 
sizes, 大 /J 、 

files, 文件 52 

HAR Viewer page pic charts, HAR Viewer 页面饼图 
50-51 

fonts, 字体 35 
em-based 37 
images, 图像 50, 52, 54 

src attribute, src 属性 68 — 69 
jQuery Mobile 230 — 231 
mobile devices, 移动设备 6 
Skyfire. user agent string, Skyfire , 用户代理串 103 
smartphones , 智能手机 
Android 3 

compared to feature phones , 与功能手机比较 113, 120 
sniffing ， 嗅探 

browsers , 浏览器 116 
user agent, 用户代理 97, 101, 135 
software development kit (SDK ) 参见 SDKs 
speed , 速度 

connection, device support, 连接，设备支持 144 
troubleshooting, 徘错 44 — 47 
Splendid Walrus website ，作凡海象网站 
index.htmi file, index.html 文件 15 
mobile phone view, 移动手机视图 4 — 9 
On Tap Now page. On Tap Now 贞面 

adding JavaScript, 增加 JavaScript 77-78 
hiding map, 隐藏地图 53 
optimization issues, 优化问题 44 〜 47 
reordering content, 内容重悱序 59-60 
structure, 结构 58 — 59 
testing performance, 测试性能 47 ~ 53 
optimization, 优化 44 — 47 
structure , 结构 15 
stylcs.css file, styles.css 文件 16 
spoofing browser user agents, i 秀骗浏览器用户代押 ：103 
src attribute, src 属性 
CSS 68 

<img> tag, 68 — 69 

stakeholders, device support, 投资人，设备支持 144 

Standard Generalized Markup Language (SGML ), 标准通用标 
记语言 （ SGML) 116 

standards , 标准 


future-friendly manifesto, 未来友好宣言 366 
localStorage API 333 — 338 
stores (application), 商店（应用 ） 385 

storing data, localStorage API, 存储数据 , localStorage API 
334-338 

strings , 字符串 

localStorage API 343 

user agents, 用户代理 98 — 100 

mobile device detection script , 移动设备检测脚本 107 
Skyfire 103 

xhtml_makc_phonc_call_slring 176 
structure. On Tap Now page, 结构 ， On Tap Now K 面 58 — 59 

study aid site mockup (Acedlt! Test Prep site ), 学习辅助模拟网 
站 (Acedlt! Test Prep 网站） 
device classes, 设备类 201 〜209 
styleColorListltem function ， stylcColorListltem 函数 277 ~ 278 
styles.css 

CACHE section, CACHE 部分 （cache manifest, 缓存清 
单 > 290 

Splendid Walrus Web , 非凡海象网站 16 
testing f 测试 133 - 134 
updating, 更新 22 

super mobile Web apps, 超级移动 Web 应用 267 参见 Web 应用 
Tartanator enhancements , 花格布爱好者应用增强 
270-280 

backend enhancements , 后端相强 280 ― 283 
forms, 表单 274-277 
geolocation , 地理定位 298 — 309 
offline mode ，离线換式 284 ~ 296 
support , 支持 

browsers , 浏览器 
caniuse.com 382 

client-side feature detection, 客户端特性检滿 339 
gelocation, 地 理定位 303 — 308 
localStorage 343 
testing, 测试 383 
devices , 设备 137, 139 
analytics , 分析 145 

audience considerations, 用户考虑 142 — 145 

browser features , 湖览器特性 144 

browsers , 湖览器 140 

connection speed , 连接速度 144 

customer considerations , 客户考虑 150 

demographics , 人口统计 145 

determining criteria/prioritics , 确 定准則/优先级 138 

geographic trends T 地理趙势 145 

hardware performance ,性能 144 

jQuery Mobile 245 
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progressive enhancement , 渐进增强 141 
questions to ask , 要问的问題 142 ― 143 
services , 服务 144 
stakeholders ,投资人 144 
unsupported devices , 不支持的设备 140—141 
swatch c, footers, swatch c, 页脚 239 
switch statement, switch 语句 192 
syntax, cache manifest, 语法，缓存淸电 285 



tablets, 平板电脑 185 
tags, 标记 

<div>, adding links, <div> ，增加链接 75 〜 76 
<img> 71 

sre attribute, src 属性 68 — 69 
<meta> 72 ~ 73, 89 

<p>, adding links, <p> ，增加链接 75-76 
<script> 377 
<ul> 240 - 243 

viewport <meta> 22, 72 — 73, 89 
taps.css, floating content, taps.css, 浮动内容 60 
targets, mobile devices, 目标，移动设备 117 
Tartanator, 花格布爱好者应用 268-269 

building with jQuery Mobile, 用 jQvery Mobile 构建 228 
data-* attribute, data-* 属性 231 — 232 
creating tartans, 创建花格布 240 — 245 
description of project ， 项目描述 222〜225 
events, 事件 271-272 
Events page ， 亊件页 ifij 271 — 272 
forms, 表单 253-261 

Phase 2 (super mobile Web app), 第 2 阶段（超级 Web 移动 
应用） 270-280 

backend enhancement , 后端增强 280 — 283 
form enhancement, 表单增强 274 — 276 
geolocation, 地理定位 298-309 
offline mode, 离 线模式 284 — 2% 
prototype , 原型 224, 253 — 261 
welcome message, 欢迎消息 271 — 272 
tartanFound function, tartanFound 函数 348, 350, 351 
Tartan Hunt 315,365 

creating ，创建 322 〜 332 

app.js file, app.js 文件 336 ― 352 
mediaCapture 348 — 353 
pictures/media, 图片 / 媒体 345 — 349 
refreshing pages, 刷新页面 340 


showing found tartans, 显示找到的花格布 340 
storing found tartans, 存储找到和花格布 334-338 
data storage, 数据存储 334-338 
installing. 安装 329-332 
showing found tartans, 显示找到的花格布 340 
storing tartans, 存储花格布 334〜338 
tartans.html file, tartans.html 文件 240 
tartans.php file, tartans.php 文件 282 
Tartans Unlimited 

About Us page, 关于我们豇面 271 
description of, 描述 222-225 
Loch Air sponsorship 314 
Tartan Hunt 参见 Tartan Hunt 
Tera-WURFL, ScientiaMobile Explorer 155 
testing, 测试 

access keys , 访问键 125 
Android apps, Android 应用 414 
Android string. Android 串 189 
app.js file, app.js 文件 353 — 355 
browser support, 浏览器支持 383 
cache manifest, 缓存淸单 286, 295 
centers for testing mobile devices, 测试移动设备的中心 
375 

CSS 23 

device capabilities in device class definitions , 设备类定义 
中的设备能力 193~198 
device classes, 设备类 200, 209 
devices ,设备 139 
explore page, 资源管理页面 169 
HTML5 fonr.s, HTML5 表单 263 
1’ m Freaking Out page, I * m Freaking Out 页面 174 
media queries in Internet Explorer, Internet Explorer 中媒体 
査询 61-64 

mobile devices, 移动设备 374 — 375 
performance, Mobitest, 性能 ， Mobitest 47 —53 
PHP 3% 

prioritization 在，指定优先级 375 
remote devices, 远程设备 375 
Safari string, Safari 串 189 
single sites, 单独的网站 109 
styles .css 133—134 
theme CSS 229 〜 230 

toggleClass method, toggleClass 方法 341—342 
toggle method, toggle 方法 341 -342 

toolbars (footer), adding to headers/footers with jQuery Mobile, 
工具条 （页 脚），用 jQuery Mobile 增加到页眉 / 页脚 
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249 - 252 
tools , 工具 

Android 405 ~ 406 

hybrid applications, 混合型应用 320 
troubleshooting , 排错 

access keys , 访问键 122,123—125,125 
Apache Friends Support Forum 394 
appCache 289, 291 

cache manifest , 缓存清单 291.292*-293 
device classes , 设备类 198 
list numbering , 列表编号 132~133 
mediaCapture API 349 
remote debugging , 远程调试 376 - 381 
speed issues , 速度问题 44 - 47 
widgets ,部件 79 — 81 
Twitter API 95 



UAProf (User Agent Profile) 103 
<ul> tag, <ul>4^Ui 240 — 243 
uninstalling , 卸栽 

Android apps with adb, 用 abd 卸栽 Android 应用 411 —413. 
415 

hybrid apps, 混合型应用 332 
updates, WURFL (Wireless Universal Resource FiLe), 

WURFL ( 无线通用资源文件 ）158 
URLs, cache manifest, URL, 缓存清电 285 
User Agent Profile (UAProO 103 
user agents, 用户代理 98 — 103 

browsers, spoofing, 湖览器， i 秀骗 103 
faccbookextemalhit 213 
mobile browsers , 移动浏览器 U)2~103 
sniffing, 嗅探 97, 101， 135 
strings, 字符串 97.98-100 

mobile device detection script , 移动设备检测脚本 107 
Skyfire 103 

V 

validating code, 验证代码 374 
validation , 验证 117 

access keys , 访问键 123 

vertical layouts compared to horizontal 垂直布局与水甲•布局对 
比 29 


videos, YouTube iframe code, 视频 ， YouTube iframe 代码 35 
viewport <meta> tag, viewport <meta>^ 记 22,72- 73, 89 
viewports ， 端口 89 

viewport <meia> tag, viewport <meta>^ul 72, 89 
virtual devices , 虚拟设备 

installing in Android SDK. Android SDK 中安装 407-408 
launching (Android), 启动 (Android) 409-410 

w 

W3C device APIs 384 

W3C Geolocation API, W3C 地理定位 API 298 
browsers, 湖览器 299 — 300 
W3C mediaCapture API 344 
WAC (Wholesale Applications Community) 384 
waterfall charts, 潘布图 48 

analyzing image sizes, 分析围像大小 54 
HAR (HTTP Archive) 49-50 
reading, 读 51 —52 

Web applications, creating hybrid applications, Web 应用，创逮 
混合型应用 322 — 327 

Web apps, Web 应用 217, 218 参见 super mobile Web apps 
Android 403 

installing, 安装 415 
installing with adb, 用 adb 安装 411 —413 
testing, 测试 414 
uninstalling, 卸栽 415 
uninstalling with adb, 用 adb 卸载 411 —413 
backend enhancements, 后端增强 280 — 283 
definition of, 定义 219 
form enhancements, 表申 - 增强 274 ~ 277 
frameworks (mobile Web apps), jQuery Mobile ，框架（移 
动 Web 应用 ） ,jQuery Mobile 228-239 
geolocation, 地理定位 267.270 
HTML5 219 

hybrid applications, 混合型应用 313, 317 
creating, 创建 322 ― 332 
tools, 工具 320 

mobile frameworks, 移动框架 217,225 
disadvantages, 缺点 225 
native applications, 原生应用 313 
device capabilities, 设备能力 316 
offline mode, 离线模式 267, 270. 284 - 296 
progressive enhancement, 渐进增强 267,270 
requests for HTML pages, HTML 页面请求 221 
Tartans Unlimited project, description of. Tartans Unlimited 
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项目，描述 222-225 
Web browsers, Web 浏览器 

application cache, 应用缓存 284 
Chrome 

testing cache manifests ，测试缓存清单 • 286 
troubleshooting cache manifest, 缓存清单排错 291 
device support , 设备支持 140, 144 
Internet Explorer 

conditional comments, 条件注释 62~63 
mobile media queries. 移动媒 体査拘 62~65 
queries media, 査淘媒体 65 
testing media queries in, 测试媒体夜询 61—64 
mobile phones, 移动 ." f - 机 3 
mobile web browsers, 移动 web 浏览器 6 
Safari 

testing cache manifests ，测试缓存淸单 286 
troubleshooting cache manifest , 缓存清 ^ • 排错 291 
support, cache manifest, 支持，缓存淸单 2% 

Web, cross-platform technology, Web, 跨平台技术 5 
Web design, Web 设计 357 

determining which design to use, 确定使用哪个设计 
358-361 

fluid layouts compared to fixed layouts, 流式布局与固定布 
局比较 24-30 

future-friendly manifesto, 未来友好宣言 362 - 363 
flexibility, 灵话性 364 
guidelines for usage, 使用原则 366- 370 
Tartan Hunt 365 

mobile-first responsive, 移动优先响应 56 — 57,71 

converting Responsive Web Design into, 响应式 Web 设 
计转换为 58 

media queries, 媒体査淘 61 
widgets, 部件 79 — 81 

progressive enhancement, 渐 进增强 55,57,141 
RWD (Responsive Web Design), RWD ( 响应式 Web 设 
计〉 10-11 

CSS media queries, CSS 媒体査询 10— 11, 13 — 14 
images , 图像 I0~ II 
layouts, 布局 10 - II 
media, 媒体 10 - 11 
Web Developer Toolkit, Web 开发包 85 
WebGL 141 
Web Inspector 65, 286 
WebKit 

browsers, 浏览器 189 
debugging, 调试 381 

Web Inspector, creating cache manifests, Web Inspector , 创 
建缓存清单 286 


Web pages, Web jJt 面 

offline mode, 离线模式 290 -2% 
requests for HTML, HTML 请求 220 
Web requests, WiFi networks, Web 讲求， WiFiM 络 45-46 
Web server setup, Web 服务器建立 387 — 396 
accessing servers, 访问服务器 394 — 395 
Apachefriends.org 390 - 391 
Linux 390-391 
Macintoshes 392 — 393 
PHP 390 — 393 
ports , 端口 393 
Windows 390 — 391 
XAMPP 390-391 
Web , 网站 

Acedlt! Test Prep 152 

red panic button ， 紧急按钮 153 
Apachefriends.org 390 — 391 
browscrscopc.org 383 
caniui>e.com 382 
debug. phonegap.com 377,381 
Device Anywhere 375 
html5test.com 383 

mobile, user agent, 移动，用户代理 98— 100 
modemizr.com 383 
Pcrfecto 375 
quirksmode.org 382 

requests for HTML pages, HTML 页 面请求 220 
RWD (Responsive Web Design), RWD ( 响应式 Web 设 
计 > I. 10-11 

sharing information, 共享信息 93 
single sites, 单独的网站 93. 104 

Acedlt! Test Prep standalone website plans, Acedlt! Test 
Prep 独立网站计划 182 

mobile device detection script , 移动设备检 测脚本 
104 - 107 

mockups , 模拟网站 108 
scrolling on mobile devices , 移动设备上汝动 
119-125 

sending mobile users to , 将移动用户指向 ％ 
user agents, 用户代理 98 - 103 
user-agent sniffing, user-agent 嗅探 97,101 
Splendid Walrus , 非凡海象网站 

index.html file, index.html 文件 15 
mobile phone view , 移动手机视图 4~9 
optimization, 优化 44 — 47 
structure , 结构 15 — 19 
styles.css file, styles.css 文件 16 
testing performance of On Tap Now page. On Tap Now 
M 面的测试性能 47-53 
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Tartans Unlimited 222-225 

Web standards, localStoragc API, Web^ 、 准， l(x:alStorage API 
333-338 

Web technologies, 术 6 

weinre 65, 376 — 381 

weinre servers, weinre 服务器 377 - 379 

welcome message, Tartanator, 欢迎消 息 . 花格布爱好者佐用 
27 卜 272 

Wholesale Applications Community (WAC) 384 
widgets , 部件 

jQuery Mobile 275 

Responsive Web Design, 响应式 Web 设计 79 — 80 
troubleshooting, 排错 79 — 81 
WiFi networks, web requests, WiFiM 络， WebUR’ 45 — 46 
wildcards. 通 fid 符 

CACHE section, CACHE 部分 （cache manifest , 缓存清 
单 > 2% 

NETWORK section, NETWORK 部分 （cache manifest , 缓 
存 淸单） 289. 291 

window.applicationCache object, window.applicationCache 
象 294 

windows, 窗 □ 

fixed layouts t 固定布局 26 
fluid layouts, 流式布局 27 
Windows 

Apache Friends Support Forum 394 
installing/uninstalling Android apps, 安装 / 卸裁 Android 应 
HI 413 

local Web server setup, 本地 Web 服务器達立 390 〜 391 
ports , 端口 393 

WIP (Wireless Industry Partnership) 385 
wireless CSS, 无线 CSS 135 
Wireless Industry Partnership (WIP) 385 
Wireless Markup Language (WML) 117 
Wireless Universal Resource FiLe 参见 WURFL 
WML (Wireless Markup Language) 117 

World Wide Web Consortium (W3C) Geolocation API . 参 
见 W3C Geolocation API, W3C 地理定位 API 

Wroblewski, Luke 386 

WURFL (Wireless Universal Resource FiLe), WURFL (无线通 
用资源 义件） 155-159 
APIs 159,213 

capabilities , 能力 156—157. 170 - 171 


creating device classes. 创建设备类 187—189, 
190-199 

creating links, 创建链接 176 
data, 数据 159 

instantiating devices, ’尖例化设洛 172 
matchers, 匹配函数 159 
objects, instantiating, 对象，实例化 163 
open source licensing , 开源作可 158 
patches ,补丁 213 
PHPAPI 156 
updates , 吏新 158 
WURFL PHPAPI 397 
代码 402 

loading, 下栽 398 
filesystem access, 文件系统访问 401 
resource path, 资源路径 402 

X 

XAMPP 

Apache Friends Support Forum 394 
downloading, 卜 • 载 390 

local Web server setup, 本地 Web 服务器达 —390 — 391 
XHR 281 

browser support, 浏览器支持 281 
X HTML-Basic 119, 135 
xhiml_make_phone_call_siring 176 
XHTML-Mobile Profile 114—118 
advantages of , 优点 117 
compared to HTML5. SHTML5 比较 115-116 
mobile browsers , 移动浏览器 116 
XML 

data files, 数据文件 397. 399 

data representation storage, 数掘衣 /] • 《存储 282 

Y 

YouTube, iframe code, YouTube, iframe 代码 35 

1 

zooming, 放大 89 
disabling, 禁用 73 

viewport <mcta> tag, viewport 72-^73 
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最值得程序员珍藏的 200 部技术经典系列仅供程序员内 
部学习交流使用，未经允许不得用于任何商业 用途。 感谢 
您的配合！ 



